@lotics/ui 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -127,6 +127,7 @@
     "./stepper": "./src/stepper.tsx",
     "./step_progress": "./src/step_progress.tsx",
     "./tabs": "./src/tabs.tsx",
+    "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
     "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",

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/segmented_control.tsx

@@ -0,0 +1,205 @@
+import { useCallback, useRef } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { PressableHighlight } from "./pressable_highlight";
+import { Text } from "./text";
+import { colors, withAlpha } from "./colors";
+
+export interface SegmentOption<T extends string> {
+  label: string;
+  value: T;
+  testID?: string;
+}
+
+interface SegmentedControlProps<T extends string> {
+  /** Accessible name of the group (it renders no visible label of its own). */
+  accessibilityLabel: string;
+  /** 2–4 mutually-exclusive peers. Above ~4, use Picker — segments stop fitting. */
+  options: SegmentOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  /** Disables the whole control (e.g. while a mode-specific action runs). */
+  disabled?: boolean;
+  /** The track hugs its content by default (`alignSelf: flex-start`); pass
+   *  `{ alignSelf: "stretch" }` to fill the parent's width. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A segmented control: 2–4 visible peer segments in an inset track, the
+ * selected one raised as a white card. Semantically a **radiogroup** — a
+ * single choice among peers, all visible — NOT a tablist (no panels) and not
+ * a Switch (not on/off). Reach for it on a binary/few-way *mode* switch where
+ * both options should be one-tap and on screen (a generator mode, a list/grid
+ * view, a day/week/month range). Above ~4 options, use `Picker`.
+ *
+ * Keyboard follows the WAI-ARIA radio pattern: roving tabindex (only the
+ * selected segment is a tab stop), arrows move focus AND select (wrapping),
+ * Space/Enter select the focused segment.
+ */
+export function SegmentedControl<T extends string>(props: SegmentedControlProps<T>) {
+  const { accessibilityLabel, options, value, onValueChange, disabled = false, style } = props;
+  const segmentRefs = useRef<Array<View | null>>([]);
+
+  const select = useCallback(
+    (index: number) => {
+      const option = options[index];
+      if (!option || option.value === value) return;
+      onValueChange(option.value);
+    },
+    [options, value, onValueChange],
+  );
+
+  // Arrows wrap and select per the radio pattern; Space/Enter select the
+  // focused segment. Focus follows selection so the new segment stays reachable.
+  const handleKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      if (disabled) return;
+      const last = options.length - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault?.();
+          select(index);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      onValueChange(options[next].value);
+      segmentRefs.current[next]?.focus();
+    },
+    [disabled, options, onValueChange, select],
+  );
+
+  // Roving tabindex: the selected segment is the tab stop. When `value` matches
+  // no option, the first segment is the fallback so the group stays reachable.
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+
+  return (
+    <View
+      style={[styles.track, disabled && styles.trackDisabled, style]}
+      accessibilityRole="radiogroup"
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled}
+    >
+      {options.map((option, index) => (
+        <Segment
+          ref={(node: View | null) => {
+            segmentRefs.current[index] = node;
+          }}
+          key={option.value}
+          option={option}
+          selected={option.value === value}
+          isTabStop={index === tabStopIndex}
+          disabled={disabled}
+          onPress={() => select(index)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface SegmentProps<T extends string> {
+  ref: (node: View | null) => void;
+  option: SegmentOption<T>;
+  selected: boolean;
+  isTabStop: boolean;
+  disabled: boolean;
+  onPress: () => void;
+  onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
+}
+
+function Segment<T extends string>(props: SegmentProps<T>) {
+  const { ref, option, selected, isTabStop, disabled, onPress, onKeyDown } = props;
+
+  return (
+    <PressableHighlight
+      ref={ref}
+      // Own the per-state background: the track is zinc-100, so an unselected
+      // segment hovering must lift TOWARD the selected white (a half-white wash),
+      // not to PressableHighlight's default zinc-100 (invisible on the track).
+      style={(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return [
+          styles.segment,
+          selected
+            ? styles.segmentSelected
+            : {
+                backgroundColor: state.pressed
+                  ? colors.white
+                  : hovered
+                    ? withAlpha(colors.white, 0.5)
+                    : "transparent",
+              },
+        ];
+      }}
+      onPress={disabled ? undefined : onPress}
+      onKeyDown={onKeyDown}
+      testID={option.testID}
+      accessibilityRole="radio"
+      accessibilityLabel={option.label}
+      aria-checked={selected}
+      aria-disabled={disabled}
+      // Roving tabindex: only the selected segment (or the fallback) is a tab
+      // stop; the rest are reached with arrow keys.
+      focusable={isTabStop && !disabled}
+    >
+      {(state) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        return (
+          <Text
+            size="sm"
+            weight={selected ? "medium" : "regular"}
+            color={selected || hovered ? "zinc-900" : "zinc-700"}
+            numberOfLines={1}
+            userSelect="none"
+          >
+            {option.label}
+          </Text>
+        );
+      }}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    gap: 2,
+    padding: 3,
+    borderRadius: 10,
+    backgroundColor: colors.zinc["100"],
+  },
+  trackDisabled: {
+    opacity: 0.55,
+  },
+  segment: {
+    // 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,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  segmentSelected: {
+    backgroundColor: colors.white,
+    boxShadow: colors.border_shadow,
+  },
+});