@lotics/ui 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/button.tsx

@@ -22,6 +22,10 @@ interface ButtonPropsBase {
   icon?: IconName;
   alignSelf?: "flex-start" | "flex-end" | "center" | "stretch" | "auto";
   color?: ButtonColor;
+  /** Corner shape. `pill` (default) is the fully-rounded capsule — keep it for
+   *  icon-only and toolbar buttons, and to preserve existing screens. `rounded`
+   *  is a 10px radius — use it for labelled CTAs / action buttons. */
+  shape?: "pill" | "rounded";
   loading?: boolean;
   disabled?: boolean;
   tooltip?: string | UseTooltipOptions;
@@ -49,6 +53,7 @@ export function Button(props: ButtonProps) {
     alignSelf,
     title,
     color,
+    shape = "pill",
     style,
     disabled,
     tooltip,
@@ -108,8 +113,11 @@ export function Button(props: ButtonProps) {
       disabled={disabledOrLoading}
       // @ts-ignore hovered is a react-native-web extension not in base RN types
       style={({ pressed, hovered }) => {
+        const isPrimary = color === "primary" && !disabled;
+        const restPrimary = isPrimary && !pressed && !hovered;
         return [
           {
+            borderRadius: shape === "rounded" ? 10 : 999,
             backgroundColor: disabled
               ? getButtonDisabledBackgroundColor(color)
               : pressed
@@ -118,6 +126,12 @@ export function Button(props: ButtonProps) {
                   ? getButtonHoverColor(color)
                   : getButtonBackgroundColor(color),
           },
+          // Subtle depth on the primary: a soft drop shadow lifts it off the
+          // surface and a whisper of top highlight + a gentle vertical shade (the
+          // app-icon technique) catch the light — premium, not skeuomorphic. The
+          // lift stays on hover/press; only the gradient drops so the wash shows.
+          isPrimary && { boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.18)" },
+          restPrimary && { backgroundImage: `linear-gradient(180deg, ${colors.zinc["700"]} 0%, ${colors.zinc["900"]} 100%)` },
           styles.button,
           style,
           alignSelf && { alignSelf },
@@ -228,7 +242,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     height: 40,
     paddingHorizontal: 10,
-    borderRadius: 999,
     // react-native-web extensions
     ...({ touchAction: "manipulation", cursor: "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },

package/src/card_select_item.tsx

@@ -5,27 +5,35 @@ import { PressableHighlight } from "./pressable_highlight";
 interface CardSelectItemProps {
   children: React.ReactNode;
   onPress: () => void;
+  /** Persistent selection — when true, the ring stays on (the current item in a
+   *  list with one active selection: an org picker's current org, a switcher's
+   *  open item). Reads as `aria-pressed`. */
+  selected?: boolean;
   testID?: string;
+  accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
 }
 
 /**
- * A bordered, card-shaped button — the selectable row used on auth screens
- * (organization picker, login choices). Always interactive: a real focusable
- * `button` that shows a 2px ring on hover/press, matching the global keyboard
- * focus ring. For a static surface use Card instead.
+ * A bordered, card-shaped button — the selectable item used on auth screens
+ * (organization picker, login choices) and in entity switchers. Always
+ * interactive: a real focusable `button` that shows a 2px ring on hover/press,
+ * matching the global keyboard focus ring. Pass `selected` to keep that ring on
+ * for the current item in a single-selection list. For a static surface use Card.
  */
 export function CardSelectItem(props: CardSelectItemProps) {
-  const { children, onPress, testID, style } = props;
+  const { children, onPress, selected = false, testID, accessibilityLabel, style } = props;
 
   return (
     <PressableHighlight
       testID={testID}
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      aria-pressed={selected}
       onPress={onPress}
       style={(state: PressableStateCallbackType) => {
         const hovered = (state as { hovered?: boolean }).hovered;
-        const active = hovered || state.pressed;
+        const active = selected || hovered || state.pressed;
         return [styles.container, active && styles.ring, style];
       }}
     >

package/src/combobox.tsx

@@ -10,7 +10,7 @@ import {
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
+import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
 import { MenuButton } from "./menu_button";
 import { ActivityIndicator } from "./activity_indicator";
@@ -58,6 +58,11 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
   recentOptions?: PickerOption<T, D>[];
   loading?: boolean;
   searchDebounceMs?: number;
+  /** Leading icon inside the input. OMIT (the default) for a SELECT — no leading
+   *  glyph, a trailing chevron — so a "pick a code/record" combobox reads as a
+   *  picker, not a free-text search box. Opt IN to the search-box look explicitly
+   *  with `icon="search"` (leading glyph, no chevron). Multi-select shows neither. */
+  icon?: IconName;
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
@@ -109,6 +114,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     recentOptions,
     loading = false,
     searchDebounceMs = 200,
+    icon,
     placeholder,
     recentsLabel = "Recent",
     emptyText = "No results",
@@ -157,11 +163,14 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     return options.filter((o) => (o.label ?? o.value).toLowerCase().includes(q));
   }, [isServer, searching, options, multi, reflectSelection, single, query]);
 
-  // Free-entry row, appended when the query matches no option label exactly.
+  // Free-entry row, appended when the query matches no option exactly. Match
+  // both label AND value — a query equal to an option's value (e.g. a code typed
+  // in full) must NOT also offer "Add <code>", or the two share a key.
   const customRow = useMemo((): PickerOption<T, D> | null => {
     if (!allowCustom || !searching) return null;
     const q = query.trim();
-    const exact = options.some((o) => (o.label ?? o.value).toLowerCase() === q.toLowerCase());
+    const ql = q.toLowerCase();
+    const exact = options.some((o) => (o.label ?? o.value).toLowerCase() === ql || String(o.value).toLowerCase() === ql);
     if (exact) return null;
     const label = customOptionLabel ? customOptionLabel(q) : `Add "${q}"`;
     if (label === null) return null;
@@ -257,6 +266,10 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const showList = open && !disabled && (searching || list.length > 0);
   const activeOptionId =
     activeIndex >= 0 && activeIndex < list.length ? optionId(activeIndex) : undefined;
+  // Select mode (no leading icon): show a trailing chevron so the field reads as
+  // a picker, not a free-text search. The clear ✕ owns the right slot when
+  // present, so suppress the chevron then.
+  const showChevron = !multi && !icon && !clearable;
 
   return (
     <View style={style}>
@@ -281,7 +294,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
         <TextInputField
           ref={inputRef}
           testID={testID}
-          icon={multi ? undefined : "search"}
+          icon={multi ? undefined : icon}
           value={query}
           clearable={!multi && clearable}
           clearLabel={clearLabel}
@@ -308,13 +321,18 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           autoFocus={autoFocus}
           autoCapitalize="none"
           autoCorrect={false}
-          style={multi ? styles.multiInput : undefined}
+          style={multi ? styles.multiInput : showChevron ? styles.selectInput : undefined}
           role="combobox"
           aria-expanded={showList}
           aria-controls={listboxId}
           aria-activedescendant={activeOptionId}
           aria-autocomplete="list"
         />
+        {showChevron ? (
+          <View style={styles.chevron}>
+            <Icon name="chevrons-up-down" size={16} color={colors.zinc["400"]} />
+          </View>
+        ) : null}
       </View>
       <Popover
         open={showList}
@@ -421,6 +439,19 @@ const styles = StyleSheet.create({
     borderWidth: 0,
     height: 28,
   },
+  // Select mode: room on the right for the trailing chevron.
+  selectInput: {
+    paddingRight: 32,
+  },
+  chevron: {
+    position: "absolute",
+    right: 10,
+    top: 0,
+    bottom: 0,
+    justifyContent: "center",
+    pointerEvents: "none",
+  },
+
   chip: {
     flexDirection: "row",
     alignItems: "center",

package/src/pagination.tsx

@@ -3,6 +3,34 @@ import { View, StyleSheet } from "react-native";
 import { IconButton } from "./icon_button";
 import { Text } from "./text";
 
+/**
+ * Localizable strings for `Pagination`. Every field is optional; an omitted
+ * field keeps the English default, so an app that needs another language passes
+ * only what it overrides (mirrors `DateRangeFilterField`'s `labels`). The
+ * formatters receive 1-indexed display numbers and the raw total, so a caller
+ * controls its own locale (e.g. `total.toLocaleString("vi-VN")`).
+ */
+export interface PaginationLabels {
+  /** Range summary with a known total. Default `${start}–${end} of ${total}`. */
+  rangeWithTotal?: (start: number, end: number, total: number) => string;
+  /** Range summary without a total. Default `${start}–${end}`. */
+  range?: (start: number, end: number) => string;
+  /** Page indicator with a known total. Default `Page ${page} of ${pageCount}`. */
+  pageWithTotal?: (page: number, pageCount: number) => string;
+  /** Page indicator without a total. Default `Page ${page}`. */
+  page?: (page: number) => string;
+  /** Previous-page button tooltip. Default "Previous". */
+  previous?: string;
+  /** Next-page button tooltip. Default "Next". */
+  next?: string;
+}
+
+const defaultRangeWithTotal = (start: number, end: number, total: number): string =>
+  `${start}–${end} of ${total.toLocaleString()}`;
+const defaultRange = (start: number, end: number): string => `${start}–${end}`;
+const defaultPageWithTotal = (page: number, pageCount: number): string => `Page ${page} of ${pageCount}`;
+const defaultPage = (page: number): string => `Page ${page}`;
+
 export interface PaginationProps {
   /** 0-indexed. */
   page: number;
@@ -18,6 +46,8 @@ export interface PaginationProps {
   total?: number;
   loading?: boolean;
   onPageChange: (page: number) => void;
+  /** Override the English strings for localization. Omit to keep defaults. */
+  labels?: PaginationLabels;
 }
 
 /**
@@ -28,21 +58,21 @@ export interface PaginationProps {
  * doubling up a border.
  */
 export function Pagination(props: PaginationProps): React.ReactNode {
-  const { page, pageSize, rowCount, hasMore, total, loading, onPageChange } = props;
+  const { page, pageSize, rowCount, hasMore, total, loading, onPageChange, labels } = props;
   const start = page * pageSize + 1;
   const end = page * pageSize + rowCount;
   const showRange = !loading && rowCount > 0;
 
   const summary = showRange
     ? total !== undefined
-      ? `${start}–${end} of ${total.toLocaleString()}`
-      : `${start}–${end}`
+      ? (labels?.rangeWithTotal ?? defaultRangeWithTotal)(start, end, total)
+      : (labels?.range ?? defaultRange)(start, end)
     : "";
 
   const pageLabel =
     total !== undefined
-      ? `Page ${page + 1} of ${Math.max(1, Math.ceil(total / pageSize))}`
-      : `Page ${page + 1}`;
+      ? (labels?.pageWithTotal ?? defaultPageWithTotal)(page + 1, Math.max(1, Math.ceil(total / pageSize)))
+      : (labels?.page ?? defaultPage)(page + 1);
 
   return (
     <View style={styles.container}>
@@ -60,14 +90,14 @@ export function Pagination(props: PaginationProps): React.ReactNode {
           color="secondary"
           onPress={() => onPageChange(Math.max(0, page - 1))}
           disabled={page === 0 || !!loading}
-          tooltip="Previous"
+          tooltip={labels?.previous ?? "Previous"}
         />
         <IconButton
           icon="chevron-right"
           color="secondary"
           onPress={() => onPageChange(page + 1)}
           disabled={!hasMore || !!loading}
-          tooltip="Next"
+          tooltip={labels?.next ?? "Next"}
         />
       </View>
     </View>

package/src/segmented_control.tsx

@@ -186,7 +186,11 @@ const styles = StyleSheet.create({
     opacity: 0.55,
   },
   segment: {
-    flex: 1,
+    // Grow to share a stretched track equally, but keep an `auto` basis so a
+    // hug-content track (the common toolbar case) sizes each segment to its
+    // label instead of collapsing it (flex-basis 0 → truncated text).
+    flexGrow: 1,
+    flexBasis: "auto",
     minHeight: 30,
     paddingVertical: 6,
     paddingHorizontal: 14,

package/src/sort_header.tsx

@@ -39,6 +39,20 @@ export function sortBy<T>(
   });
 }
 
+/**
+ * Localizable a11y fragments for `SortHeader`. The visible header is the app's
+ * own `label`; only the screen-reader announcement is built here, so these
+ * cover that string. Omit any field to keep the English default.
+ */
+export interface SortHeaderLabels {
+  /** a11y prefix around the column label. Default `(label) => `Sort by ${label}``. */
+  sortBy?: (label: string) => string;
+  /** Appended when sorted ascending. Default ", ascending". */
+  ascending?: string;
+  /** Appended when sorted descending. Default ", descending". */
+  descending?: string;
+}
+
 export interface SortHeaderProps {
   label: string;
   sortKey: string;
@@ -47,6 +61,8 @@ export interface SortHeaderProps {
   /** Right-align for numeric columns — the arrow then sits LEFT of the label. */
   align?: "left" | "right";
   style?: ViewStyle;
+  /** Override the English a11y strings for localization. Omit to keep defaults. */
+  labels?: SortHeaderLabels;
 }
 
 /**
@@ -57,15 +73,20 @@ export interface SortHeaderProps {
  * flush with the column content beneath it.
  */
 export function SortHeader(props: SortHeaderProps) {
-  const { label, sortKey, sort, onSort, align = "left", style } = props;
+  const { label, sortKey, sort, onSort, align = "left", style, labels } = props;
   const active = sort?.key === sortKey;
   const arrow = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
-  const dirText = active ? (sort.dir === "asc" ? ", ascending" : ", descending") : "";
+  const dirText = active
+    ? sort.dir === "asc"
+      ? (labels?.ascending ?? ", ascending")
+      : (labels?.descending ?? ", descending")
+    : "";
+  const sortByLabel = (labels?.sortBy ?? ((l: string) => `Sort by ${l}`))(label);
 
   return (
     <PressableHighlight
       accessibilityRole="button"
-      accessibilityLabel={`Sort by ${label}${dirText}`}
+      accessibilityLabel={`${sortByLabel}${dirText}`}
       onPress={() => onSort(sortKey)}
       style={[styles.header, align === "right" ? styles.right : null, style]}
     >

package/src/table.tsx

@@ -11,7 +11,7 @@ import { StyleSheet, View, Pressable, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { Divider } from "./divider";
 import { PressableRow } from "./pressable_row";
-import { SortHeader, type SortState } from "./sort_header";
+import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
 
 /**
  * One column of a register — its width/flex/align/label/sortability defined ONCE,
@@ -50,6 +50,8 @@ export interface TableProps {
   sort?: SortState | null;
   /** Cycles the sort (none→asc→desc→none) — pair with `cycleSort` in the parent. */
   onSort?: (key: string) => void;
+  /** Localized a11y strings for the sortable headers. Omit to keep English. */
+  sortLabels?: SortHeaderLabels;
   /** Reserve a leading gutter (px) for rows that render a `leading` slot (a checkbox). */
   leading?: number;
   /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
@@ -67,7 +69,7 @@ export interface TableProps {
  * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
  */
 export function Table(props: TableProps) {
-  const { columns, sort, onSort, leading = 0, trailing = 0, children } = props;
+  const { columns, sort, onSort, sortLabels, leading = 0, trailing = 0, children } = props;
   const rows = Children.toArray(children).filter(isValidElement);
 
   return (
@@ -78,7 +80,7 @@ export function Table(props: TableProps) {
           <View key={col.key} style={colStyle(col)}>
             {col.label ? (
               col.sortable && onSort ? (
-                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} />
+                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
               ) : (
                 <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
                   {col.label}