@lotics/ui 5.9.0 → 5.10.0

package/src/data_grid.tsx

@@ -0,0 +1,159 @@
+import { type ReactNode } from "react";
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { FocusRingPressable } from "./focus_ring_pressable";
+import { Icon } from "./icon";
+import { Text } from "./text";
+import { type SortState, type SortHeaderLabels } from "./sort_header";
+
+export interface DataGridColumn<T> {
+  key: string;
+  label: string;
+  /** Fixed width in px; omit for the flexible primary column (usually the first). */
+  width?: number;
+  sortable?: boolean;
+  /** Render the cell for this column — any field: a `Text`, an inline editor, a badge. */
+  cell: (item: T) => ReactNode;
+}
+
+export interface DataGridGroup<T> {
+  key: string;
+  /** The group's header content — a status badge, a member chip, a label. Omit for a
+   *  single ungrouped section (no header, no collapse). */
+  header?: ReactNode;
+  items: T[];
+}
+
+export interface DataGridProps<T> {
+  columns: DataGridColumn<T>[];
+  /** Pre-grouped, pre-sorted data (the consumer owns grouping/sort/filter). One headerless group = ungrouped. */
+  groups: DataGridGroup<T>[];
+  getRowKey: (item: T) => string;
+  /** A per-row leading slot (e.g. a `CheckCircle`) and the gutter it reserves so the header lines up. */
+  leading?: { width: number; render: (item: T) => ReactNode };
+  sort?: SortState | null;
+  /** Pair with `cycleSort` to cycle a column (none → asc → desc). Sorting itself is the consumer's (`sortBy`). */
+  onSort?: (key: string) => void;
+  /** Localize the sortable-header a11y text (`Sort by …` + `, ascending`/`, descending`). */
+  labels?: SortHeaderLabels;
+  /** Controlled collapse — the set of collapsed group keys. */
+  collapsed?: Set<string>;
+  onToggleCollapse?: (key: string) => void;
+  /** Rendered under each group's rows — typically a per-group add row. Align it with `gridRowStyle` + the column widths. */
+  renderGroupFooter?: (group: DataGridGroup<T>) => ReactNode;
+}
+
+/**
+ * The INLINE-MANAGED grouped table — a presentational grid for a MODERATE dataset
+ * you manage in view (group/sort/filter/edit-in-place), the complement to the
+ * high-volume paginated register (`Table` + `Pagination` + `Drawer`). It owns the
+ * sortable header, the collapsible grouped sections, and the column-aligned rows;
+ * the consumer owns the DATA, the sort/group/filter/collapse STATE, the toolbar
+ * (search · group-by · filters), the per-group add (`renderGroupFooter`), and every
+ * CELL (`columns[].cell` renders ANY field). It renders ALL rows — no pagination /
+ * virtualization — so it's for hundreds, low-thousands; at 10k+ use the register.
+ * Worked examples: `tpl_task_board`, `tpl_pipeline`.
+ */
+export function DataGrid<T>(props: DataGridProps<T>) {
+  const { columns, groups, getRowKey, leading, sort, onSort, labels, collapsed, onToggleCollapse, renderGroupFooter } = props;
+  const lead = leading?.width ?? 0;
+
+  return (
+    <View>
+      <View style={[styles.row, styles.head]}>
+        {lead > 0 ? <View style={{ width: lead }} /> : null}
+        {columns.map((c) => (
+          <SortLabel key={c.key} label={c.label} sortKey={c.key} sortable={c.sortable !== false && !!onSort} sort={sort ?? null} onSort={onSort} labels={labels} style={colStyle(c)} />
+        ))}
+      </View>
+
+      {groups.map((g, i) => {
+        const isCollapsed = collapsed?.has(g.key) ?? false;
+        return (
+          <View key={g.key} style={i > 0 ? styles.groupSep : undefined}>
+            {g.header != null ? (
+              <FocusRingPressable
+                onPress={() => onToggleCollapse?.(g.key)}
+                accessibilityRole="button"
+                accessibilityState={{ expanded: !isCollapsed }}
+                disabled={!onToggleCollapse}
+                style={({ hovered }: { hovered?: boolean }) => [styles.section, hovered && onToggleCollapse ? styles.sectionHover : null]}
+              >
+                {onToggleCollapse ? <Icon name={isCollapsed ? "chevron-right" : "chevron-down"} size={15} color={colors.zinc[400]} /> : null}
+                {g.header}
+                <Text size="xs" color="muted" tabular>{g.items.length}</Text>
+              </FocusRingPressable>
+            ) : null}
+            {!isCollapsed ? (
+              <>
+                {g.items.map((item) => (
+                  <View key={getRowKey(item)} style={styles.row}>
+                    {lead > 0 ? <View style={{ width: lead }}>{leading?.render(item)}</View> : null}
+                    {columns.map((c) => (
+                      <View key={c.key} style={colStyle(c)}>{c.cell(item)}</View>
+                    ))}
+                  </View>
+                ))}
+                {renderGroupFooter?.(g)}
+              </>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function colStyle(c: { width?: number }): StyleProp<ViewStyle> {
+  return c.width != null ? { width: c.width } : styles.flexCol;
+}
+
+// The aligned sortable header label — same 8px inset as the cells, so it lines up
+// with the column content (the kit's `SortHeader` keeps its label flush, which
+// wouldn't match inline-editor cells).
+function SortLabel(props: { label: string; sortKey: string; sortable: boolean; sort: SortState | null; onSort?: (k: string) => void; labels?: SortHeaderLabels; style?: StyleProp<ViewStyle> }) {
+  const { label, sortKey, sortable, sort, onSort, labels, style } = props;
+  const active = sort?.key === sortKey;
+  const arrow = active ? (sort?.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
+  if (!sortable) {
+    return (
+      <View style={[styles.sortLabel, style]}>
+        <Text size="xs" weight="semibold" color="muted" numberOfLines={1} style={styles.headLabel}>{label}</Text>
+      </View>
+    );
+  }
+  const sortByLabel = (labels?.sortBy ?? ((l: string) => `Sort by ${l}`))(label);
+  const dirText = active ? (sort?.dir === "asc" ? (labels?.ascending ?? ", ascending") : (labels?.descending ?? ", descending")) : "";
+  return (
+    <FocusRingPressable onPress={() => onSort?.(sortKey)} accessibilityRole="button" accessibilityLabel={`${sortByLabel}${dirText}`} style={({ hovered }: { hovered?: boolean }) => [styles.sortLabel, hovered ? styles.sortLabelHover : null, style]}>
+      <Text size="xs" weight="semibold" color={active ? "default" : "muted"} numberOfLines={1} style={styles.headLabel}>{label}</Text>
+      {arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
+    </FocusRingPressable>
+  );
+}
+
+/** The row layout the grid uses — reuse it for an aligned per-group add row in `renderGroupFooter`. */
+export const gridRowStyle: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 12,
+  minHeight: 44,
+  paddingHorizontal: 8,
+};
+
+const styles = StyleSheet.create({
+  row: gridRowStyle,
+  flexCol: { flex: 1, minWidth: 0 },
+  head: {
+    minHeight: 30,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.zinc[100],
+    marginBottom: 4,
+  },
+  headLabel: { letterSpacing: 0.3, textTransform: "uppercase" },
+  sortLabel: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 6, cursor: "pointer" },
+  sortLabelHover: { backgroundColor: colors.zinc[50] },
+  groupSep: { borderTopWidth: 1, borderTopColor: colors.zinc[100], marginTop: 8, paddingTop: 8 },
+  section: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, paddingVertical: 7, borderRadius: 8 },
+  sectionHover: { backgroundColor: colors.zinc[50] },
+});

package/src/date_calendar.tsx

@@ -5,6 +5,45 @@ import { colors } from "./colors";
 import { useScreenSize } from "./use_screen_size";
 import { Picker, PickerOption } from "./picker";
 import { IconButton } from "./icon_button";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+
+function DayCell(props: {
+  day: number;
+  label: string;
+  isActive: boolean;
+  inRange: boolean;
+  isToday: boolean;
+  onPress: () => void;
+}) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+      accessibilityState={{ selected: props.isActive }}
+      {...focusProps}
+      style={({ hovered }) => [
+        styles.dayCell,
+        props.inRange && styles.dayCellInRange,
+        props.isActive && styles.dayCellSelected,
+        hovered && !props.isActive && styles.dayCellHovered,
+        focusVisible && { boxShadow: FOCUS_RING },
+      ]}
+      onPress={props.onPress}
+    >
+      <Text
+        size="sm"
+        color={props.isActive ? "inverted" : "default"}
+        userSelect="none"
+        weight={props.isToday ? "semibold" : "regular"}
+      >
+        {props.day}
+      </Text>
+      {props.isToday && <View style={[styles.todayDot, props.isActive && styles.todayDotInverted]} />}
+    </Pressable>
+  );
+}
 
 // =============================================================================
 // Types
@@ -350,31 +389,15 @@ function CalendarMonth(props: CalendarMonthProps) {
             const isActive = isSelected || isRangeStart || isRangeEnd;
 
             return (
-              <Pressable
+              <DayCell
                 key={dayIndex}
-                accessibilityRole="button"
-                accessibilityLabel={names.formatDayLabel(date)}
-                accessibilityState={{ selected: isActive }}
-                style={({ hovered }) => [
-                  styles.dayCell,
-                  inRange && styles.dayCellInRange,
-                  isActive && styles.dayCellSelected,
-                  hovered && !isActive && styles.dayCellHovered,
-                ]}
+                day={day}
+                label={names.formatDayLabel(date)}
+                isActive={isActive}
+                inRange={inRange}
+                isToday={isTodayDate}
                 onPress={() => onDateSelect(date)}
-              >
-                <Text
-                  size="sm"
-                  color={isActive ? "inverted" : "default"}
-                  userSelect="none"
-                  weight={isTodayDate ? "semibold" : "regular"}
-                >
-                  {day}
-                </Text>
-                {isTodayDate && (
-                  <View style={[styles.todayDot, isActive && styles.todayDotInverted]} />
-                )}
-              </Pressable>
+              />
             );
           })}
         </View>

package/src/date_field.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
+import { useHover } from "./use_hover";
 import { Text } from "./text";
 import { DateSegments } from "./date_segments_field";
 import { SegmentLabels, dateSegmentsConfig } from "./date_segments";
@@ -56,6 +57,7 @@ export function DateField(props: DateFieldProps) {
   } = props;
 
   const [focused, setFocused] = useState(false);
+  const { hovered, hoverProps } = useHover();
   const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(
@@ -96,8 +98,10 @@ export function DateField(props: DateFieldProps) {
     <View
       ref={triggerRef}
       onPointerDown={handlePointerDown}
+      {...(hoverProps as object)}
       style={[
         styles.frame,
+        hovered && !disabled && styles.frameHovered,
         focused && !disabled && styles.frameFocused,
         disabled && styles.frameDisabled,
         style,
@@ -149,9 +153,13 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,
+    ...CONTROL_TRANSITION,
+  },
+  frameHovered: {
+    borderColor: HOVER_BORDER,
   },
   frameFocused: {
-    borderColor: colors.zinc["900"],
+    boxShadow: FOCUS_RING,
   },
   frameDisabled: {
     backgroundColor: colors.zinc["50"],

package/src/date_filter.tsx

@@ -5,7 +5,7 @@ import { colors } from "./colors";
 import { CONTROL_RADIUS } from "./control_surface";
 import { MenuButton } from "./menu_button";
 import { Calendar, CalendarRangeValue, CalendarRef } from "./date_calendar";
-import { TimeField } from "./time_field";
+import { TimePicker } from "./time_picker";
 import { Switch } from "./switch";
 import { useScreenSize } from "./use_screen_size";
 import { SegmentLabels } from "./date_segments";
@@ -270,11 +270,9 @@ export function DateFilter(props: DateFilterProps) {
                 </Text>
                 {includeTime && (
                   <View style={{ marginTop: 4 }}>
-                    <TimeField
+                    <TimePicker
                       value={value.start.time || ""}
-                      onChange={handleStartTimeChange}
-                      segmentLabels={labels}
-                      locale={locale}
+                      onValueChange={handleStartTimeChange}
                     />
                   </View>
                 )}
@@ -292,11 +290,9 @@ export function DateFilter(props: DateFilterProps) {
                 </Text>
                 {includeTime && value.end.date && (
                   <View style={{ marginTop: 4 }}>
-                    <TimeField
+                    <TimePicker
                       value={value.end.time || ""}
-                      onChange={handleEndTimeChange}
-                      segmentLabels={labels}
-                      locale={locale}
+                      onValueChange={handleEndTimeChange}
                     />
                   </View>
                 )}

package/src/date_picker.tsx

@@ -4,15 +4,18 @@ import { Text } from "./text";
 import { colors } from "./colors";
 import { Popover, PopoverContent } from "./popover";
 import { Calendar, CalendarRangeValue } from "./date_calendar";
-import { TimeField } from "./time_field";
+import { TimePicker } from "./time_picker";
 import { DateField } from "./date_field";
 import { SegmentLabels } from "./date_segments";
 import { Icon } from "./icon";
 import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { Divider } from "./divider";
 import {
   DatePickerFormat,
+  dropTime,
   hasTimeFormat,
+  isoHasTime,
   isoToDate,
   isRangeFormat,
   nowIso,
@@ -42,6 +45,10 @@ export interface DatePickerLabels extends SegmentLabels {
   endTime: string;
   /** Footer action: commit and close the popover. */
   done: string;
+  /** Quick action: add a time to a date-only value (`optionalTime`). */
+  addTime: string;
+  /** Accessible name + tooltip: drop the time, keeping the date (`optionalTime`). */
+  removeTime: string;
 }
 
 const DEFAULT_LABELS: DatePickerLabels = {
@@ -53,6 +60,8 @@ const DEFAULT_LABELS: DatePickerLabels = {
   time: "Time",
   startTime: "Start time",
   endTime: "End time",
+  addTime: "Add time",
+  removeTime: "Remove time",
   year: "Year",
   month: "Month",
   day: "Day",
@@ -65,6 +74,10 @@ export interface DatePickerProps {
   value?: string | null;
   onValueChange: (value: string) => void;
   format?: DatePickerFormat;
+  /** Single `date` formats only: let the user OPTIONALLY add a time. The value's
+   *  shape is the source of truth — date-only until the user adds a time, then a
+   *  datetime — and the panel offers "Add time" / "Remove time". */
+  optionalTime?: boolean;
   disabled?: boolean;
   /** Fires when the text input loses focus, after any typed value is committed. */
   onBlur?: () => void;
@@ -88,6 +101,8 @@ export interface DatePickerPanelProps {
   value?: string | null;
   onValueChange: (value: string) => void;
   format: DatePickerFormat;
+  /** Single `date` formats only: time is optional and driven by the value's shape. */
+  optionalTime?: boolean;
   labels?: Partial<DatePickerLabels>;
   /** BCP-47 locale for the calendar's weekday/month names. Defaults to "en-US". */
   locale?: string;
@@ -96,10 +111,14 @@ export interface DatePickerPanelProps {
 }
 
 export function DatePickerPanel(props: DatePickerPanelProps) {
-  const { value, onValueChange, format, labels, locale, onRequestClose } = props;
+  const { value, onValueChange, format, optionalTime, labels, locale, onRequestClose } = props;
 
   const isRange = isRangeFormat(format);
-  const hasTime = hasTimeFormat(format);
+  // In optionalTime mode the value's own shape says whether there's a time; the
+  // panel offers Add/Remove. Otherwise the format fixes it.
+  const optTime = !!optionalTime && !isRange;
+  const valueHasTime = isoHasTime(value);
+  const hasTime = optTime ? valueHasTime : hasTimeFormat(format);
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
 
   const [startIso, endIso] = useMemo<[string, string]>(() => {
@@ -125,9 +144,11 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
   const handleSingleCalendar = useCallback(
     (date: Date | null) => {
       onValueChange(date ? withCalendarDate(date, value ?? "", hasTime) : "");
-      if (date && format === "date") onRequestClose?.();
+      // Date-only formats commit-and-close on pick; datetime and optionalTime stay
+      // open so a time can be entered/added.
+      if (date && format === "date" && !optTime) onRequestClose?.();
     },
-    [value, hasTime, format, onValueChange, onRequestClose],
+    [value, hasTime, format, optTime, onValueChange, onRequestClose],
   );
 
   const handleRangeCalendar = useCallback(
@@ -194,7 +215,7 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
 
       {showTimeRow && (
         <>
-          <Divider paddingVertical={8} />
+          <Divider paddingVertical={4} />
           <View style={styles.timeRow}>
             {isRange ? (
               <>
@@ -202,38 +223,43 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
                   <Text size="sm" color="muted">
                     {mergedLabels.startTime}
                   </Text>
-                  <TimeField
+                  <TimePicker
                     accessibilityLabel={mergedLabels.startTime}
-                    segmentLabels={mergedLabels}
                     value={timeText(startIso)}
-                    onChange={(t) => handleRangeTime("start", t)}
-                    locale={locale}
+                    onValueChange={(t) => handleRangeTime("start", t)}
                   />
                 </View>
                 <View style={styles.timeCol}>
                   <Text size="sm" color="muted">
                     {mergedLabels.endTime}
                   </Text>
-                  <TimeField
+                  <TimePicker
                     accessibilityLabel={mergedLabels.endTime}
-                    segmentLabels={mergedLabels}
                     value={timeText(endIso)}
-                    onChange={(t) => handleRangeTime("end", t)}
-                    locale={locale}
+                    onValueChange={(t) => handleRangeTime("end", t)}
                   />
                 </View>
               </>
             ) : (
               <View style={styles.timeCol}>
-                <Text size="sm" color="muted">
-                  {mergedLabels.time}
-                </Text>
-                <TimeField
+                <View style={styles.timeHead}>
+                  <Text size="sm" color="muted">
+                    {mergedLabels.time}
+                  </Text>
+                  {optTime ? (
+                    <IconButton
+                      icon="x"
+                      size="sm"
+                      tooltip={mergedLabels.removeTime}
+                      accessibilityLabel={mergedLabels.removeTime}
+                      onPress={() => onValueChange(dropTime(value ?? ""))}
+                    />
+                  ) : null}
+                </View>
+                <TimePicker
                   accessibilityLabel={mergedLabels.time}
-                  segmentLabels={mergedLabels}
                   value={timeText(value ?? "")}
-                  onChange={handleSingleTime}
-                  locale={locale}
+                  onValueChange={handleSingleTime}
                 />
               </View>
             )}
@@ -241,6 +267,19 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
         </>
       )}
 
+      {optTime && !!value && !valueHasTime && (
+        <>
+          <Divider paddingVertical={8} />
+          <View style={styles.addTimeRow}>
+            <Button
+              title={mergedLabels.addTime}
+              color="muted"
+              onPress={() => onValueChange(withTimeOfDay(value, timeText(nowIso(true))))}
+            />
+          </View>
+        </>
+      )}
+
       <Divider paddingVertical={8} />
       <View style={styles.footer}>
         <Button title={mergedLabels.clear} color="muted" onPress={() => closeAndSet("")} />
@@ -248,18 +287,18 @@ export function DatePickerPanel(props: DatePickerPanelProps) {
           {format === "date" && (
             <Button
               title={mergedLabels.today}
-              color="secondary"
+              color="muted"
               onPress={() => closeAndSet(nowIso(false))}
             />
           )}
           {format === "datetime" && (
             <Button
               title={mergedLabels.now}
-              color="secondary"
+              color="muted"
               onPress={() => closeAndSet(nowIso(true))}
             />
           )}
-          {format !== "date" && (
+          {(format !== "date" || optTime) && (
             <Button title={mergedLabels.done} color="secondary" onPress={() => onRequestClose?.()} />
           )}
         </View>
@@ -290,6 +329,7 @@ export function DatePicker(props: DatePickerProps) {
     value,
     onValueChange,
     format = "date",
+    optionalTime,
     disabled,
     onBlur,
     testID,
@@ -299,7 +339,9 @@ export function DatePicker(props: DatePickerProps) {
   } = props;
 
   const isRange = isRangeFormat(format);
-  const hasTime = hasTimeFormat(format);
+  const optTime = !!optionalTime && !isRange;
+  // The trigger's segments follow the value's shape in optionalTime mode.
+  const hasTime = optTime ? isoHasTime(value) : hasTimeFormat(format);
   const mergedLabels = useMemo<DatePickerLabels>(
     () => ({ ...DEFAULT_LABELS, ...labels }),
     [labels],
@@ -347,7 +389,7 @@ export function DatePicker(props: DatePickerProps) {
 
   // Display-only — the whole field is pressable (DateField opens the calendar).
   const calendarIcon = (
-    <Icon name="calendar" size={18} color={disabled ? colors.zinc["300"] : colors.zinc["400"]} />
+    <Icon name="calendar" size={20} color={disabled ? colors.zinc["300"] : colors.zinc["400"]} />
   );
 
   const trigger = (
@@ -385,6 +427,7 @@ export function DatePicker(props: DatePickerProps) {
             value={value}
             onValueChange={onValueChange}
             format={format}
+            optionalTime={optionalTime}
             labels={labels}
             locale={locale}
             onRequestClose={closeOverlay}
@@ -417,4 +460,13 @@ const styles = StyleSheet.create({
     flex: 1,
     gap: 4,
   },
+  timeHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    minHeight: 24,
+  },
+  addTimeRow: {
+    flexDirection: "row",
+  },
 });

package/src/date_picker_value.ts

@@ -112,6 +112,17 @@ export function nowIso(hasTime: boolean): string {
   return partsToIso(dateToParts(new Date()), hasTime);
 }
 
+/** Whether a value carries a time component (canonical datetime uses a "T" separator). */
+export function isoHasTime(iso: string | null | undefined): boolean {
+  return !!iso && iso.includes("T");
+}
+
+/** The value with any time component dropped (date-only). Empty when unparseable. */
+export function dropTime(iso: string): string {
+  const p = parsePart(iso);
+  return p ? partsToIso(p, false) : "";
+}
+
 const TIME_RE = /^(\d{1,2}):(\d{2})$/;
 
 /**

package/src/date_range_filter_field.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { Icon } from "./icon";
 import { Button } from "./button";
 import { PressableHighlight } from "./pressable_highlight";
@@ -120,20 +120,22 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
     <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">
       <PopoverTrigger>
         <PressableHighlight
+          focusRing
           testID={testID}
           accessibilityRole="button"
           accessibilityLabel={labels.selectDateRange}
-          style={{
+          style={(state) => ({
             flexDirection: "row",
             alignItems: "center",
             gap: 8,
             paddingVertical: 9,
             paddingHorizontal: 12,
             borderWidth: 1,
-            borderColor: colors.zinc[300],
+            borderColor: state.hovered ? HOVER_BORDER : colors.zinc[300],
             borderRadius: CONTROL_RADIUS,
             backgroundColor: colors.white,
-          }}
+            ...CONTROL_TRANSITION,
+          })}
         >
           <Icon name="calendar" size={16} color={hasValue ? colors.zinc[700] : colors.zinc[400]} />
           <Text size="sm" color={hasValue ? "default" : "muted"} numberOfLines={1} style={{ flex: 1 }}>

package/src/drawer.tsx

@@ -79,7 +79,7 @@ export function Drawer(props: DrawerProps) {
     <Modal visible={open} onRequestClose={handleClose} transparent>
       <View style={styles.base}>
         {/* Scrim is a sibling of the panel, so tapping the panel never closes. */}
-        <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel="Close" />
+        <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel="Close" tabIndex={-1} />
         <View style={[styles.panel, { width: screenSize.small ? "100%" : width }]}>
           <PortalHost>
             <View style={styles.header}>

package/src/file_dropzone.tsx

@@ -4,6 +4,8 @@ import { colors } from "./colors";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { pickFiles } from "./file_picker";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface FileDropzoneProps {
   /** Receives the picked/dropped files. Bytes/upload belong to the host —
@@ -67,6 +69,7 @@ export function FileDropzone(props: FileDropzoneProps) {
   const dragDepth = useRef(0);
   const [dragging, setDragging] = useState(false);
   const [hovered, setHovered] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
 
   // RN-web exposes the View's underlying HTMLElement through the ref — attach
   // the DOM drag events there. Native platforms skip this entirely (press-to-
@@ -124,6 +127,7 @@ export function FileDropzone(props: FileDropzoneProps) {
       accessibilityLabel={accessibilityLabel ?? label}
       disabled={disabled}
       onPress={handlePick}
+      {...focusProps}
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
       style={[
@@ -133,6 +137,7 @@ export function FileDropzone(props: FileDropzoneProps) {
         dragging ? styles.zoneDragging : null,
         disabled ? styles.zoneDisabled : null,
         style,
+        focusVisible && { boxShadow: FOCUS_RING },
       ]}
     >
       <View style={[styles.iconWell, dragging ? styles.iconWellDragging : null]}>