@lotics/ui 5.9.0 → 5.10.1

package/src/files_editor.tsx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { Button } from "./button";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { MenuButton } from "./menu_button";
+import { Alert } from "./alert";
+import { FileGrid, type FileUpload } from "./file_grid";
+import { FileGalleryModal } from "./file_gallery_modal";
+import type { GalleryLabels } from "./file_preview_types";
+import { type DisplayFile } from "./file_thumbnail";
+import { pickFiles } from "./file_picker";
+import { downloadFileFromUrl } from "./download";
+
+export interface FilesEditorLabels {
+  upload: string;
+  select: string;
+  selectAll: string;
+  deselectAll: string;
+  done: string;
+  /** The select-mode actions menu trigger. */
+  menu: string;
+  downloadAll: string;
+  /** Download-selected menu item, given the count. */
+  downloadSelected: (n: number) => string;
+  /** Download-as-ZIP menu item (shown when `onDownloadZipSelected` + 2+ selected). */
+  downloadZip: string;
+  share: string;
+  delete: string;
+  removeTitle: string;
+  removeMessage: string;
+  removeCancel: string;
+  removeConfirm: string;
+}
+
+const DEFAULT_LABELS: FilesEditorLabels = {
+  upload: "Upload",
+  select: "Select",
+  selectAll: "Select all",
+  deselectAll: "Deselect all",
+  done: "Done",
+  menu: "Menu",
+  downloadAll: "Download all",
+  downloadSelected: (n) => `Download (${n})`,
+  downloadZip: "Download as ZIP",
+  share: "Share",
+  delete: "Delete",
+  removeTitle: "Remove attachment?",
+  removeMessage: "This removes the file.",
+  removeCancel: "Cancel",
+  removeConfirm: "Remove",
+};
+
+export interface FilesEditorProps {
+  /** Completed/saved files. */
+  files: DisplayFile[];
+  /** The live add-queue (in-flight uploads) — pass through from your upload mechanism. */
+  uploads?: FileUpload[];
+  /** Picked files → the host uploads + appends to `files`. Omit to hide Upload. */
+  onAdd?: (files: File[]) => void;
+  /** Override the Upload action's picker (e.g. a native document picker). When
+   *  set, the Upload button calls this instead of the built-in web `pickFiles`. */
+  onUpload?: () => void;
+  /** Show a "Download as ZIP" action in select mode (2+ selected), given the files. */
+  onDownloadZipSelected?: (files: DisplayFile[]) => void;
+  /** Remove a completed file. Omit (or `readOnly`) for a view-only surface. */
+  onRemove?: (id: string) => void;
+  /** Cancel an in-flight upload / retry a failed one (when using `uploads`). */
+  onUploadRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onRetryAll?: () => void;
+  /** Show a Share action in select mode, given the selected files. Omit to hide it. */
+  onShareSelected?: (files: DisplayFile[]) => void;
+  /** Override the default download (`downloadFileFromUrl`). */
+  onDownload?: (file: DisplayFile) => void;
+  /** Download + preview only (no Upload / Select / remove). */
+  readOnly?: boolean;
+  /** Native `accept` filter for the file picker. */
+  accept?: string;
+  itemSize?: number;
+  minItemWidth?: number;
+  /** Fixed column count for the grid (passed through to `FileGrid`). */
+  columns?: number;
+  /** Translated labels. Defaults to English. */
+  labels?: Partial<FilesEditorLabels>;
+  /** Credentials mode for the built-in gallery's preview fetches — `"include"`
+   *  for the host's auth-gated proxy URLs, omitted for an app's presigned URLs.
+   *  See `FilePreviewProps`. */
+  credentials?: RequestCredentials;
+  /** Translated labels for the built-in full-screen gallery (its toolbar action
+   *  buttons + confirm dialog). Defaults to English. */
+  galleryLabels?: Partial<GalleryLabels>;
+}
+
+/**
+ * The all-in-one attachment surface: an upload-aware thumbnail grid (`FileGrid`)
+ * with a toolbar BELOW it, a batch SELECT mode, full-screen preview
+ * (`FileGalleryModal`), and download / share / Alert-confirmed remove. Agnostic —
+ * the host wires `onAdd` (picked files → its upload) and `onRemove`; select mode,
+ * the gallery, download and the remove confirm are all internal. Mirrors the
+ * frontend `files_editor`. For a plain row list use `FileRows`; for the bare
+ * upload grid use `FileGrid`.
+ */
+export function FilesEditor(props: FilesEditorProps) {
+  const {
+    files,
+    uploads,
+    onAdd,
+    onUpload,
+    onDownloadZipSelected,
+    onRemove,
+    onUploadRemove,
+    onRetry,
+    onRetryAll,
+    onShareSelected,
+    onDownload,
+    readOnly = false,
+    accept,
+    itemSize,
+    minItemWidth,
+    columns,
+    labels,
+    credentials,
+    galleryLabels,
+  } = props;
+  const l = { ...DEFAULT_LABELS, ...labels };
+
+  const [selectMode, setSelectMode] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(() => new Set());
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [galleryIndex, setGalleryIndex] = useState<number | null>(null);
+
+  const hasFiles = files.length > 0;
+  const allSelected = hasFiles && selected.size === files.length;
+  const selectedFiles = files.filter((f) => selected.has(f.id));
+
+  const toggle = (id: string) =>
+    setSelected((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  const exitSelect = () => { setSelectMode(false); setSelected(new Set()); };
+  const download = (fs: DisplayFile[]) =>
+    fs.forEach((f) => (onDownload ? onDownload(f) : void downloadFileFromUrl(f.url, f.filename, { credentials })));
+  const confirmRemove = (onConfirm: () => void) =>
+    Alert.alert(l.removeTitle, l.removeMessage, [
+      { text: l.removeCancel, style: "cancel" },
+      { text: l.removeConfirm, style: "destructive", onPress: onConfirm },
+    ]);
+  const upload = () => {
+    if (!onAdd) return;
+    void pickFiles({ multiple: true, accept }).then((picked) => { if (picked.length > 0) onAdd(picked); });
+  };
+
+  return (
+    <View style={styles.root}>
+      <FileGrid
+        files={files}
+        uploads={uploads}
+        itemSize={itemSize}
+        minItemWidth={minItemWidth}
+        columns={columns}
+        selectedIds={selectMode ? selected : undefined}
+        onToggleSelect={selectMode ? toggle : undefined}
+        onFilePress={selectMode ? undefined : (f) => setGalleryIndex(files.findIndex((x) => x.id === f.id))}
+        onDisplayRemove={!readOnly && !selectMode && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined}
+        onUploadRemove={onUploadRemove}
+        onRetry={onRetry}
+        onRetryAll={onRetryAll}
+      />
+
+      {readOnly ? (
+        hasFiles ? (
+          <View style={styles.bar}>
+            <View style={styles.spacer} />
+            <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} />
+          </View>
+        ) : null
+      ) : selectMode ? (
+        <View style={styles.bar}>
+          <Button
+            title={allSelected ? l.deselectAll : l.selectAll}
+            color="muted"
+            onPress={() => setSelected(allSelected ? new Set() : new Set(files.map((f) => f.id)))}
+          />
+          <Popover open={menuOpen} onOpenChange={setMenuOpen} align="start">
+            <PopoverTrigger>
+              <Button title={l.menu} color="secondary" disabled={selected.size === 0} onPress={() => setMenuOpen(true)} />
+            </PopoverTrigger>
+            <PopoverContent>
+              <View style={styles.menu}>
+                <MenuButton icon="download" title={l.downloadSelected(selected.size)} onPress={() => { setMenuOpen(false); download(selectedFiles); }} />
+                {onDownloadZipSelected && selected.size > 1 ? (
+                  <MenuButton icon="file-down" title={l.downloadZip} onPress={() => { setMenuOpen(false); onDownloadZipSelected(selectedFiles); }} />
+                ) : null}
+                {onShareSelected ? (
+                  <MenuButton icon="share" title={l.share} onPress={() => { setMenuOpen(false); onShareSelected(selectedFiles); }} />
+                ) : null}
+                {onRemove ? (
+                  <MenuButton icon="trash" title={l.delete} danger onPress={() => { setMenuOpen(false); confirmRemove(() => { selectedFiles.forEach((f) => onRemove(f.id)); exitSelect(); }); }} />
+                ) : null}
+              </View>
+            </PopoverContent>
+          </Popover>
+          <View style={styles.spacer} />
+          <Button title={l.done} color="secondary" onPress={exitSelect} />
+        </View>
+      ) : (
+        <View style={styles.bar}>
+          {onAdd || onUpload ? <Button title={l.upload} color="primary" onPress={onUpload ?? upload} /> : null}
+          {hasFiles ? <Button title={l.select} color="secondary" onPress={() => setSelectMode(true)} /> : null}
+          <View style={styles.spacer} />
+          {hasFiles ? <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} /> : null}
+        </View>
+      )}
+
+      <FileGalleryModal
+        files={files}
+        activeIndex={galleryIndex}
+        onIndexChange={setGalleryIndex}
+        onRemove={!readOnly && onRemove ? onRemove : undefined}
+        onDownload={onDownload}
+        onOpenExternal={(f) => { if (typeof window !== "undefined") window.open(f.url, "_blank"); }}
+        credentials={credentials}
+        labels={galleryLabels}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { gap: 10 },
+  bar: { flexDirection: "row", alignItems: "center", gap: 8 },
+  spacer: { flex: 1 },
+  menu: { minWidth: 200, gap: 2, padding: 4 },
+});

package/src/filter_chip.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useState } from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
@@ -12,20 +12,21 @@ export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
    *  active ("Owner: Maria, James"). */
   label: string;
-  /** A short human summary of the active selection ("Maria, James", "≥ 10").
-   *  Empty / undefined renders the inactive pill (label + chevron, no clear).
-   *  Build it with `rangeSummary` / `selectSummary` for a consistent preview. */
-  summary?: string;
+  /** The active selection preview, after "Label: ". A string ("Maria, James",
+   *  "≥ 10" — build with `rangeSummary` / `selectSummary`), OR a node to render the
+   *  selection RICHLY in the trigger (member avatars, colour dots). Empty /
+   *  undefined renders the inactive pill (label + chevron, no clear). */
+  summary?: ReactNode;
   /** Clears the dimension — renders the × on the pill AND a Clear in the popover
    *  footer whenever a summary is present. */
   onClear?: () => void;
   /** Label for the clear affordances (pass a translated string). */
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`RangeSlider`,
-   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterChip` owns
+   *  `Counter`, `OptionList` multi) or any composed control. `FilterChip` owns
    *  the pill + popover chrome; the consumer owns the value and applies it.
    *  Pass a render function to receive `close` — the one editor that closes on
-   *  action is single-select (`<PickerMenu>` → close on pick); range/counter/
+   *  action is single-select (`<OptionList>` → close on pick); range/counter/
    *  multi stay open and dismiss on outside-press, so they pass a plain node. */
   children: ReactNode | ((api: { close: () => void }) => ReactNode);
   side?: PopoverSide;
@@ -62,14 +63,14 @@ export function selectSummary(
  * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
  * padded popover body for the composed editor, and a Clear footer when active —
  * so every filter looks and behaves the same. Drop a premium primitive inside
- * (`RangeSlider`, `Counter`, `PickerMenu` multi). With `footer` (+ controlled
+ * (`RangeSlider`, `Counter`, `OptionList` multi). With `footer` (+ controlled
  * `open`/`onOpenChange`) the same shell wraps a non-filter VALUE pill — a
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
 export function FilterChip(props: FilterChipProps) {
   const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
-  const active = summary != null && summary.length > 0;
+  const active = summary != null && (typeof summary !== "string" || summary.length > 0);
   // The clear × / Clear footer only when there's a clearable selection AND no
   // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
   const showClear = active && !!onClear && !footer;
@@ -88,9 +89,16 @@ export function FilterChip(props: FilterChipProps) {
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
         <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
-          <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
-            {active ? `${label}: ${summary}` : label}
-          </Text>
+          {active && typeof summary !== "string" ? (
+            <View style={styles.summaryRow}>
+              <Text size="sm" weight="medium" color="zinc-700">{`${label}:`}</Text>
+              {summary}
+            </View>
+          ) : (
+            <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
+              {active ? `${label}: ${summary}` : label}
+            </Text>
+          )}
           {!showClear ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
         </Chip>
       </PopoverTrigger>
@@ -116,4 +124,9 @@ const styles = StyleSheet.create({
   body: {
     gap: 8,
   },
+  summaryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
 });

package/src/focus_ring_pressable.tsx

@@ -0,0 +1,34 @@
+import { Pressable, type PressableProps, type StyleProp, type View, type ViewStyle } from "react-native";
+import { type Ref } from "react";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing, composeHandler } from "./use_focus_ring";
+
+export interface FocusRingPressableProps extends PressableProps {
+  ref?: Ref<View>;
+}
+
+/**
+ * A `Pressable` that paints the kit `FOCUS_RING` on keyboard focus — the raw-control
+ * counterpart to `PressableHighlight`'s `focusRing` prop, for interactive elements
+ * that DON'T want the hover wash (cells, tiles, nav buttons, menu options). Forwards
+ * every `PressableProps` (onPress, accessibilityRole/Label/State, ref, …) and merges
+ * the ring with the caller's `style` (object or state-function) + onFocus/onBlur.
+ * Reach for this before hand-rolling a one-off Pressable + `useFocusRing`.
+ */
+export function FocusRingPressable({ ref, style, onFocus, onBlur, ...rest }: FocusRingPressableProps) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      ref={ref}
+      {...rest}
+      onFocus={composeHandler(onFocus ?? undefined, focusProps.onFocus)}
+      onBlur={composeHandler(onBlur ?? undefined, focusProps.onBlur)}
+      style={(state) =>
+        [
+          typeof style === "function" ? style(state) : style,
+          focusVisible ? { boxShadow: FOCUS_RING } : null,
+        ] as StyleProp<ViewStyle>
+      }
+    />
+  );
+}

package/src/form_picker.tsx

@@ -1,9 +1,9 @@
 import { FormField, FormFieldProps } from "./form_field";
 import { Picker, PickerProps } from "./picker";
 
-/** `FormField` wrapping a `Picker` — one labeled select. */
-export function FormPicker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI> & FormFieldProps,
+/** `FormField` wrapping a `Picker` — one labeled native select. */
+export function FormPicker<T extends string>(
+  props: PickerProps<T> & FormFieldProps,
 ) {
   const { label, description, optional, optionalLabel, error, ...pickerProps } = props;
 

package/src/gantt/gantt_view.tsx

@@ -1,7 +1,26 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { View, ScrollView, Pressable, StyleSheet } from "react-native";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { View, ScrollView, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { FocusRingPressable } from "../focus_ring_pressable";
+
+function GanttButton(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 { addDays, dayDiff } from "../calendar/dates";
 import { usePointerDrag } from "../use_pointer_drag";
 import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
@@ -74,11 +93,11 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
         {title ? <Text size="sm" color="muted">{title}</Text> : <View />}
         <View style={styles.zoomSwitch}>
           {SCALES.map((s) => (
-            <Pressable key={s} onPress={() => setScale(s)} accessibilityRole="button" style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
+            <GanttButton key={s} onPress={() => setScale(s)} style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
               <Text size="sm" weight={scale === s ? "medium" : "regular"} color={scale === s ? "default" : "muted"}>
                 {L[s]}
               </Text>
-            </Pressable>
+            </GanttButton>
           ))}
         </View>
       </View>
@@ -127,16 +146,15 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
                       <View key={tk.date.toISOString()} style={{ position: "absolute", left: tk.left, top: 0, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[200] }} />
                     ) : null,
                   )}
-                  <Pressable
+                  <GanttButton
                     onPress={onTaskPress ? () => onTaskPress(t) : undefined}
-                    accessibilityRole={onTaskPress ? "button" : undefined}
                     accessibilityLabel={t.label}
                     style={{ position: "absolute", left: base.left, width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
                   >
                     <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8, opacity: dragging ? 0.85 : 1 }}>
                       <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
                     </View>
-                  </Pressable>
+                  </GanttButton>
                   {onTaskResize ? (
                     <View
                       ref={bind(t.id, "ew-resize")}

package/src/heatmap.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { colors, withAlpha } from "./colors";
 import { Text } from "./text";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface HeatmapAxisItem {
   key: string;
@@ -97,6 +99,7 @@ interface CellProps {
 function Cell(props: CellProps) {
   const { label, background, selected, onPress } = props;
   const [hovered, setHovered] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
   const base = {
     backgroundColor: background,
     borderColor: selected ? colors.zinc[900] : hovered && onPress ? colors.zinc[400] : "transparent",
@@ -108,9 +111,10 @@ function Cell(props: CellProps) {
       accessibilityState={{ selected }}
       accessibilityLabel={label}
       onPress={onPress}
+      {...focusProps}
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
-      style={[styles.cell, base]}
+      style={[styles.cell, base, focusVisible && { boxShadow: FOCUS_RING }]}
     />
   );
 }

package/src/icon_button.tsx

@@ -75,8 +75,8 @@ export function IconButton(props: IconButtonProps) {
 
   return (
     <PressableHighlight
-      ref={ref}
-      testID={testID}
+      focusRing
+      ref={ref}      testID={testID}
       tooltip={tooltip}
       tooltipSide={tooltipSide}
       accessibilityRole="button"

package/src/image_gallery.tsx

@@ -8,8 +8,9 @@
 // relying on percentage/flex-basis resolution (which collapses inside an
 // auto-width parent).
 import { useState } from "react";
-import { View, Pressable, type ViewStyle } from "react-native";
+import { View, type ViewStyle } from "react-native";
 import { Text } from "./text";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { ActivityIndicator } from "./activity_indicator";
@@ -76,9 +77,8 @@ export function ImageGallery({
     // The rotate controls sit OUTSIDE the zoom Pressable (an absolute sibling on
     // top) so pressing them turns the image instead of opening the modal.
     <View style={{ width: "100%" }}>
-      <Pressable
+      <FocusRingPressable accessibilityRole="button"
         onPress={() => setZoomIdx(idx)}
-        accessibilityRole="button"
         accessibilityLabel="Zoom image"
         style={{
           width: "100%",
@@ -92,25 +92,23 @@ export function ImageGallery({
         }}
       >
         <RotatableImage uri={main.url} alt={main.filename} rotation={rotation.rotationFor(main.id)} />
-      </Pressable>
+      </FocusRingPressable>
       {rotatable ? (
         <View style={{ position: "absolute", top: 8, right: 8, flexDirection: "row", gap: 6 }}>
-          <Pressable
+          <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, -1)}
-            accessibilityRole="button"
             accessibilityLabel="Rotate left"
             style={rotateButtonStyle}
           >
             <Icon name="rotate-ccw" size={16} color={colors.white} />
-          </Pressable>
-          <Pressable
+          </FocusRingPressable>
+          <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, 1)}
-            accessibilityRole="button"
             accessibilityLabel="Rotate right"
             style={rotateButtonStyle}
           >
             <Icon name="rotate-cw" size={16} color={colors.white} />
-          </Pressable>
+          </FocusRingPressable>
         </View>
       ) : null}
     </View>

package/src/index.css

@@ -336,18 +336,14 @@ html {
   color: var(--color-zinc-900);
 }
 
-/* Focus ring — keyboard-driven only (`:focus-visible`), so pointer/touch
-   interactions stay clutter-free (no stray ring stacked on a clicked button,
-   tab, or segment that already shows its own state). A SELECT shows its own
-   active edge on a mouse-open via `ACTIVE_RING` (control_surface.ts) — that, not
-   this rule, is what rings the combobox/picker on a pointer open. The ring sits
-   flush against the border (offset 0, no gap) and, being an outline, never
-   reflows layout. */
-:focus-visible {
-  outline: 2px solid var(--color-zinc-900);
-  outline-offset: 0;
-}
-:focus:not(:focus-visible) {
+/* Native UA focus-outline reset — purely subtractive. The kit has NO global focus
+   ring: each interactive control paints its OWN ring inline (a `FOCUS_RING`
+   box-shadow, applied on keyboard focus via `useFocusRing`; control_surface.ts).
+   That keeps rings surgical (only where a control opts in) instead of blanketing
+   every focusable container the browser would otherwise outline. This line only
+   removes the browser default so an un-opted element shows nothing — it never adds
+   a ring. App authors opt their own raw focusable elements in with `useFocusRing`. */
+:focus {
   outline: none;
 }
 

package/src/inline_date_picker.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useRef, useState } from "react";
 import { View } from "react-native";
-import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { DatePickerPanel } from "./date_picker";
+import { isoHasTime } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
 import { InlineEditView } from "./inline_edit";
@@ -15,6 +15,9 @@ export interface InlineDatePickerProps {
   onSave: (next: string) => void | Promise<void>;
   /** "date" (default) or "datetime". */
   format?: "date" | "datetime";
+  /** Let the user OPTIONALLY add a time to a date (the value's shape decides — date
+   *  until a time is added). Ignored when `format` is "datetime" (time always on). */
+  optionalTime?: boolean;
   placeholder?: string;
   /** BCP-47 locale for the calendar and the displayed date. */
   locale?: string;
@@ -30,7 +33,7 @@ export interface InlineDatePickerProps {
  * dismissing without a change reverts.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
-  const { value, onSave, format = "date", placeholder, locale, disabled, accessibilityLabel } = props;
+  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel } = props;
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
   const [saving, setSaving] = useState(false);
@@ -68,8 +71,10 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
   );
 
   // `format` here is the field config (date vs datetime); the display formatter only needs
-  // whether to show a time → map it to the orthogonal `time` flag.
-  const display = formatDate(value, { time: format === "datetime", locale, emptyLabel: "" });
+  // whether to show a time → map it to the orthogonal `time` flag. In optionalTime mode the
+  // value's own shape decides.
+  const showTime = optionalTime ? isoHasTime(value) : format === "datetime";
+  const display = formatDate(value, { time: showTime, locale, emptyLabel: "" });
 
   return (
     <View>
@@ -81,13 +86,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
             disabled={disabled}
             active={open && !disabled}
             accessibilityLabel={accessibilityLabel}
-            trailing={
-              saving ? (
-                <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : (
-                <Icon name="calendar" size={18} color={colors.zinc[400]} />
-              )
-            }
+            trailing={saving ? <ActivityIndicator size={16} color={colors.zinc[400]} /> : undefined}
           />
         </PopoverTrigger>
         <PopoverContent>
@@ -98,6 +97,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
               setDraft(v);
             }}
             format={format}
+            optionalTime={optionalTime}
             locale={locale}
             onRequestClose={() => setOpen(false)}
           />