@lotics/ui 5.8.0 → 5.10.0

package/src/button.tsx

@@ -2,6 +2,7 @@ import {
   ActivityIndicator,
   NativeSyntheticEvent,
   Pressable,
+  PressableStateCallbackType,
   StyleProp,
   StyleSheet,
   View,
@@ -9,11 +10,12 @@ import {
 } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { Ref, useCallback } from "react";
 import { TextColor } from "./text_utils";
 import { useTooltip, UseTooltipOptions } from "./tooltip";
+import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { getButtonIconColor } from "./button_colors";
 export type ButtonColor = "primary" | "secondary" | "danger" | "muted" | "danger-secondary";
 export type ButtonIconPosition = "left" | "right";
@@ -60,6 +62,7 @@ export function Button(props: ButtonProps) {
 
   const disabledOrLoading = disabled || loading;
   const tooltipProps = useTooltip(tooltip);
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(
     (event: NativeSyntheticEvent<any>) => {
@@ -106,8 +109,7 @@ export function Button(props: ButtonProps) {
       }
       aria-disabled={disabledOrLoading || undefined} aria-busy={loading || undefined}
       disabled={disabledOrLoading}
-      // @ts-ignore hovered is a react-native-web extension not in base RN types
-      style={({ pressed, hovered }) => {
+      style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => {
         const isPrimary = color === "primary" && !disabled;
         const restPrimary = isPrimary && !pressed && !hovered;
         return [
@@ -130,10 +132,17 @@ export function Button(props: ButtonProps) {
           styles.button,
           style,
           alignSelf && { alignSelf },
+          // Keyboard focus: paint the ring last so it wins over the primary's depth
+          // shadow (one boxShadow key — separate entries can't stack). The ring sits
+          // 2px OUTSIDE the box on the page, so it stays visible even on the dark
+          // primary.
+          focusVisible && { boxShadow: FOCUS_RING },
         ] as StyleProp<ViewStyle>;
       }}
       onPress={handlePress}
       {...tooltipProps}
+      onFocus={composeHandler(tooltipProps.onFocus, focusProps.onFocus)}
+      onBlur={composeHandler(tooltipProps.onBlur, focusProps.onBlur)}
     >
       {children}
     </Pressable>

package/src/calendar/calendar_view.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { View, Pressable, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { FocusRingPressable } from "../focus_ring_pressable";
 import { MonthView } from "./month_view";
 import { TimeGridView } from "./time_grid_view";
 import { addDays, addMonths, viewTitle } from "./dates";
@@ -50,15 +51,15 @@ export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
     <View style={styles.root}>
       <View style={styles.toolbar}>
         <View style={styles.navGroup}>
-          <Pressable onPress={() => step(-1)} accessibilityRole="button" accessibilityLabel={L.previous} style={styles.iconBtn}>
+          <FocusRingPressable accessibilityRole="button" onPress={() => step(-1)} accessibilityLabel={L.previous} style={styles.iconBtn}>
             <Text size="lg" color="muted">‹</Text>
-          </Pressable>
-          <Pressable onPress={() => setDate(new Date())} accessibilityRole="button" style={styles.todayBtn}>
+          </FocusRingPressable>
+          <FocusRingPressable accessibilityRole="button" onPress={() => setDate(new Date())} style={styles.todayBtn}>
             <Text size="sm" weight="medium">{L.today}</Text>
-          </Pressable>
-          <Pressable onPress={() => step(1)} accessibilityRole="button" accessibilityLabel={L.next} style={styles.iconBtn}>
+          </FocusRingPressable>
+          <FocusRingPressable accessibilityRole="button" onPress={() => step(1)} accessibilityLabel={L.next} style={styles.iconBtn}>
             <Text size="lg" color="muted">›</Text>
-          </Pressable>
+          </FocusRingPressable>
         </View>
 
         <Text size="lg" weight="semibold" style={styles.title} numberOfLines={1}>
@@ -67,16 +68,15 @@ export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
 
         <View style={styles.viewSwitch}>
           {VIEW_ORDER.map((v) => (
-            <Pressable
+            <FocusRingPressable accessibilityRole="button"
               key={v}
               onPress={() => setView(v)}
-              accessibilityRole="button"
               style={[styles.viewBtn, view === v && styles.viewBtnActive]}
             >
               <Text size="sm" weight={view === v ? "medium" : "regular"} color={view === v ? "default" : "muted"}>
                 {L[v]}
               </Text>
-            </Pressable>
+            </FocusRingPressable>
           ))}
         </View>
       </View>

package/src/calendar/month_view.tsx

@@ -1,7 +1,28 @@
-import { useMemo, useRef } from "react";
-import { View, Pressable, StyleSheet } from "react-native";
+import { useMemo, useRef, type ReactNode, type Ref } from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { FocusRingPressable } from "../focus_ring_pressable";
+
+function MonthPressable(props: {
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style: StyleProp<ViewStyle>;
+  pressableRef?: Ref<View>;
+  children: ReactNode;
+}) {
+  return (
+    <FocusRingPressable
+      ref={props.pressableRef}
+      onPress={props.onPress}
+      accessibilityRole={props.onPress ? "button" : undefined}
+      accessibilityLabel={props.accessibilityLabel}
+      style={props.style}
+    >
+      {props.children}
+    </FocusRingPressable>
+  );
+}
 import { usePointerDrag } from "../use_pointer_drag";
 import { packEventLanes } from "./layout";
 import { addDays, dayDiff, daysInView, isSameMonth, isToday, startOfDay, weekdayShort } from "./dates";
@@ -89,10 +110,9 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                 const inMonth = isSameMonth(day, date);
                 const today = isToday(day, now);
                 return (
-                  <Pressable
+                  <MonthPressable
                     key={day.toISOString()}
                     onPress={onDayPress ? () => onDayPress(day) : undefined}
-                    accessibilityRole={onDayPress ? "button" : undefined}
                     style={styles.dateCell}
                   >
                     <View style={[styles.dateBadge, today && { backgroundColor: colors.teal[600] }]}>
@@ -104,7 +124,7 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                         {day.getDate()}
                       </Text>
                     </View>
-                  </Pressable>
+                  </MonthPressable>
                 );
               })}
             </View>
@@ -124,11 +144,10 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                 const banner = bar.span > 1 || !!bar.event.allDay;
                 const drag = live && live.id === bar.event.id ? live : null;
                 return (
-                  <Pressable
+                  <MonthPressable
                     key={bar.event.id}
-                    ref={onEventDrop ? bind(bar.event.id, "grab") : undefined}
+                    pressableRef={onEventDrop ? bind(bar.event.id, "grab") : undefined}
                     onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
-                    accessibilityRole={onEventPress ? "button" : undefined}
                     accessibilityLabel={bar.event.title}
                     style={{
                       position: "absolute",
@@ -161,18 +180,18 @@ export function MonthView<T = unknown>(props: MonthViewProps<T>) {
                         {bar.event.title}
                       </Text>
                     </View>
-                  </Pressable>
+                  </MonthPressable>
                 );
               })}
               {weekDays.map((day, col) =>
                 overflow[col] > 0 ? (
-                  <Pressable
+                  <MonthPressable
                     key={`o${col}`}
                     onPress={onDayPress ? () => onDayPress(day) : undefined}
                     style={{ position: "absolute", top: MAX_LANES * (LANE_H + LANE_GAP), left: `${(col / 7) * 100}%`, width: `${100 / 7}%`, paddingHorizontal: 6 }}
                   >
                     <Text size="xs" color="muted">{moreLabel(overflow[col])}</Text>
-                  </Pressable>
+                  </MonthPressable>
                 ) : null,
               )}
             </View>

package/src/calendar/time_grid_view.tsx

@@ -1,7 +1,26 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { View, ScrollView, Pressable, StyleSheet, Text as RNText } from "react-native";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { View, ScrollView, StyleSheet, Text as RNText, type StyleProp, type ViewStyle } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { FocusRingPressable } from "../focus_ring_pressable";
+
+function TimeGridPressable(props: {
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style: StyleProp<ViewStyle>;
+  children: ReactNode;
+}) {
+  return (
+    <FocusRingPressable
+      onPress={props.onPress}
+      accessibilityRole={props.onPress ? "button" : undefined}
+      accessibilityLabel={props.accessibilityLabel}
+      style={props.style}
+    >
+      {props.children}
+    </FocusRingPressable>
+  );
+}
 import { layoutDayColumns, packEventLanes } from "./layout";
 import {
   daysInView,
@@ -56,7 +75,7 @@ function EventBlock<T>({
   const accent = event.color || colors.teal[600];
   const compact = height < 34;
   return (
-    <Pressable
+    <FocusRingPressable
       onPress={onPress ? () => onPress(event) : undefined}
       accessibilityRole={onPress ? "button" : undefined}
       accessibilityLabel={event.title}
@@ -90,7 +109,7 @@ function EventBlock<T>({
           </Text>
         ) : null}
       </View>
-    </Pressable>
+    </FocusRingPressable>
   );
 }
 
@@ -170,10 +189,9 @@ export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
             {allDayPacked.bars.map((bar) => {
               const accent = bar.event.color || colors.teal[600];
               return (
-                <Pressable
+                <TimeGridPressable
                   key={bar.event.id}
                   onPress={onEventPress ? () => onEventPress(bar.event) : undefined}
-                  accessibilityRole={onEventPress ? "button" : undefined}
                   accessibilityLabel={bar.event.title}
                   style={{
                     position: "absolute",
@@ -189,7 +207,7 @@ export function TimeGridView<T = unknown>(props: TimeGridViewProps<T>) {
                       {bar.event.title}
                     </Text>
                   </View>
-                </Pressable>
+                </TimeGridPressable>
               );
             })}
           </View>

package/src/card_select_item.tsx

@@ -1,7 +1,7 @@
-import { PressableStateCallbackType, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
-import { PressableHighlight } from "./pressable_highlight";
+import { CONTROL_RADIUS, FOCUS_RING } from "./control_surface";
+import { PressableHighlight, PressableHighlightState } from "./pressable_highlight";
 
 interface CardSelectItemProps {
   children: React.ReactNode;
@@ -18,8 +18,8 @@ interface CardSelectItemProps {
 /**
  * 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
+ * interactive: a real focusable `button` that shows the kit FOCUS_RING on
+ * hover/press/keyboard focus. 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) {
@@ -32,9 +32,8 @@ export function CardSelectItem(props: CardSelectItemProps) {
       accessibilityLabel={accessibilityLabel}
       aria-pressed={selected}
       onPress={onPress}
-      style={(state: PressableStateCallbackType) => {
-        const hovered = (state as { hovered?: boolean }).hovered;
-        const active = selected || hovered || state.pressed;
+      style={(state: PressableHighlightState) => {
+        const active = selected || state.hovered || state.pressed || state.focusVisible;
         return [styles.container, active && styles.ring, style];
       }}
     >
@@ -51,11 +50,10 @@ const styles = StyleSheet.create({
     borderColor: colors.border,
     borderWidth: 1,
   },
-  // A 2px ring flush against the border (spread 2, no offset/blur) — the same
-  // weight and color as the global `:focus-visible` outline, so hover, press,
-  // and keyboard focus all read as one consistent ring rather than a thin
-  // border-darken. boxShadow keeps it layout-neutral (no 1px→2px reflow).
+  // The kit FOCUS_RING flush against the border (spread 2, no offset/blur), so
+  // hover, press, and keyboard focus all read as one consistent ring rather than a
+  // thin border-darken. boxShadow keeps it layout-neutral (no 1px→2px reflow).
   ring: {
-    ...({ boxShadow: `0 0 0 2px ${colors.zinc["900"]}` } as ViewStyle),
+    ...({ boxShadow: FOCUS_RING } as ViewStyle),
   },
 });

package/src/check_circle.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View, type GestureResponderEvent } from "react-native";
+import { colors } from "./colors";
+import { FocusRingPressable } from "./focus_ring_pressable";
+import { Icon } from "./icon";
+
+export interface CheckCircleProps {
+  checked: boolean;
+  /** Toggle handler. Omit for a read-only ring (shows state, not pressable). */
+  onChange?: (checked: boolean) => void;
+  /** Fill colour when checked. Default zinc-900 (pass a list/project colour to tint it). */
+  color?: string;
+  /** Diameter. Default 20. */
+  size?: number;
+  disabled?: boolean;
+  accessibilityLabel: string;
+}
+
+/**
+ * A circular completion toggle — an empty ring that fills with a spring + a white
+ * check when checked (the iOS-Reminders / Linear "done" gesture), distinct from
+ * the square form `Checkbox`. The signature control for a task / to-do / checklist
+ * item; pair it with a title that strikes + mutes on the same `checked`. It stops
+ * the press, so it works inside a pressable row. Read-only (no `onChange`) shows
+ * the state without a tap.
+ */
+export function CheckCircle(props: CheckCircleProps) {
+  const { checked, onChange, color = colors.zinc[900], size = 20, disabled, accessibilityLabel } = props;
+  const v = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.spring(v, { toValue: checked ? 1 : 0, useNativeDriver: false, friction: 6, tension: 160 }).start();
+  }, [checked, v]);
+
+  const face = (borderColor: string) => (
+    <View style={[styles.ring, { width: size, height: size, borderRadius: size / 2, borderColor }]}>
+      <Animated.View style={{ position: "absolute", width: size, height: size, borderRadius: size / 2, backgroundColor: color, transform: [{ scale: v }], opacity: v }} />
+      <Animated.View style={{ opacity: v, transform: [{ scale: v }] }}>
+        <Icon name="check" size={Math.round(size * 0.62)} color={colors.white} />
+      </Animated.View>
+    </View>
+  );
+
+  if (!onChange) {
+    return (
+      <View accessibilityRole="image" accessibilityLabel={accessibilityLabel} style={[styles.tap, { width: size, height: size }, disabled ? styles.disabled : null]}>
+        {face(checked ? color : colors.zinc[300])}
+      </View>
+    );
+  }
+
+  const press = (e: GestureResponderEvent) => {
+    e?.stopPropagation?.();
+    if (!disabled) onChange(!checked);
+  };
+  return (
+    <FocusRingPressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={press}
+      hitSlop={10}
+      // The ring follows the element's border-radius — round it to the circle so
+      // the keyboard ring hugs the toggle instead of boxing it.
+      style={[styles.tap, { width: size, height: size, borderRadius: size / 2 }, disabled ? styles.disabled : null]}
+    >
+      {({ hovered }: { hovered?: boolean }) => face(checked ? color : hovered ? colors.zinc[500] : colors.zinc[300])}
+    </FocusRingPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  tap: {
+    alignItems: "center",
+    justifyContent: "center",
+    // @ts-ignore rn-web
+    cursor: "pointer",
+  },
+  disabled: { opacity: 0.4 },
+  ring: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
+    // @ts-ignore rn-web
+    transitionProperty: "border-color",
+    transitionDuration: "0.12s",
+  },
+});

package/src/checkbox_input.tsx

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
 import { Pressable } from "react-native";
 import { Checkbox } from "./checkbox";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 interface CheckboxInputProps {
   /**
    * Accessible name. Required because an unlabelled checkbox only announces
@@ -16,6 +18,7 @@ interface CheckboxInputProps {
 
 export function CheckboxInput(props: CheckboxInputProps) {
   const { accessibilityLabel, indeterminate, checked, onChange, disabled, testID } = props;
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(() => {
     if (!disabled) {
@@ -28,7 +31,8 @@ export function CheckboxInput(props: CheckboxInputProps) {
       testID={testID}
       onPress={handlePress}
       disabled={disabled}
-      style={{ opacity: disabled ? 0.5 : 1 }}
+      {...focusProps}
+      style={[{ opacity: disabled ? 0.5 : 1, borderRadius: 6 }, focusVisible && { boxShadow: FOCUS_RING }]}
       // Use the W3C ARIA props directly: RN-web 0.21 no longer maps
       // `accessibilityState={{ checked }}` to `aria-checked`, which dropped the
       // checked state from the accessibility tree (a role="checkbox" with no

package/src/chip.tsx

@@ -20,7 +20,7 @@ export function Chip(props: ChipProps) {
     <View ref={ref}>
       {onPress ? (
         <PressableHighlight
-          testID={testID}
+          focusRing          testID={testID}
           onPress={onPress}
           style={(state) => [chipSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
         >

package/src/chip_group.tsx

@@ -46,7 +46,7 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
         const active = option.value === value;
         return (
           <PressableHighlight
-            key={option.value}
+            focusRing            key={option.value}
             testID={option.testID}
             onPress={() => onValueChange(option.value)}
             accessibilityRole="button"

package/src/column_filter.tsx

@@ -2,7 +2,7 @@ import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 import { NumberInput } from "./number_input";
-import { PickerMenu } from "./picker_menu";
+import { OptionList } from "./option_list";
 import { FilterChip } from "./filter_chip";
 import type { PickerOption } from "./picker";
 
@@ -143,7 +143,8 @@ export function ColumnFilter(props: ColumnFilterProps) {
             />
           </View>
         ) : (
-          <PickerMenu
+          <OptionList
+            search={{ mode: "none" }}
             multi
             options={column.options ?? []}
             value={value?.kind === "select" ? value.selected : []}