@lotics/ui 12.1.1 → 13.7.0

package/src/inline_time_picker.tsx

@@ -3,7 +3,7 @@ import type { KeyboardEvent } from "react";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { TimePicker } from "./time_picker";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
@@ -16,7 +16,7 @@ export interface InlineTimePickerProps {
   disabled?: boolean;
   accessibilityLabel?: string;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
 }
 
 /**
@@ -25,7 +25,7 @@ export interface InlineTimePickerProps {
  * field at the same height, so the form never reflows.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , background } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -43,7 +43,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/inset.tsx

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+import { colors } from "./colors";
+
+interface InsetProps {
+  /** The grouped content — a sub-form's fields, an inline fill editor, a nested block. */
+  children: ReactNode;
+  /** Test id on the container. */
+  testID?: string;
+}
+
+/**
+ * A tinted, recessed content surface — the "well" INSIDE a Card or Section for a grouped
+ * sub-form, an inline fill editor, or a nested detail block. It carries the kit's
+ * nested-surface tokens (zinc-50 fill, 10 radius, 14 padding) and a 12 gap so stacked
+ * fields keep the form rhythm.
+ *
+ * `Inset` is NOT a `Callout`. A Callout is a status BAND — it announces a message, and
+ * for `warning`/`error` it is an ARIA `alert`. Wrapping form fields in an alert is wrong:
+ * a screen reader announces the whole form as one time-sensitive alert. The law is:
+ * **content + fields go in an `Inset`; a message goes in a `Callout`.**
+ */
+export function Inset({ children, testID }: InsetProps) {
+  return (
+    <View style={styles.inset} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  inset: {
+    backgroundColor: colors.zinc[50],
+    borderRadius: 10,
+    padding: 14,
+    gap: 12,
+  },
+});

package/src/linked_record_box.tsx

@@ -0,0 +1,102 @@
+import { type ReactNode } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { PressableRow } from "./pressable_row";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
+import { useFocusRing } from "./use_focus_ring";
+import { FOCUS_RING } from "./control_surface";
+
+interface LinkedRecordBoxProps {
+  /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
+  icon: IconName;
+  /** The linked record's display name. */
+  name: string;
+  /** A secondary identity line — a code, tax id, country, or "<desk> record". */
+  subtitle?: string;
+  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). */
+  facts?: { label: string; value: string }[];
+  /** Width of the facts' label column (default 80). Widen for longer labels. */
+  factLabelWidth?: number;
+  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
+  doorLabel: string;
+  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
+  onOpen: () => void;
+  /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
+   *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
+   *  spacer between). The divider is drawn automatically when actions are present. Supplied by
+   *  the consumer so the labels stay localized and the verb set fits the link. */
+  actions?: ReactNode;
+}
+
+/**
+ * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
+ * (identity glyph · name · facts), the WHOLE box a keyboard-accessible door into that record's
+ * detail. Use it wherever one record points at another (a shipment's customer, an invoice's
+ * party, a case's sibling); the picker / empty-state that REASSIGNS the link is the consumer's,
+ * shown in place of the box.
+ *
+ * The a11y contract it enforces (the error-prone part, hence a primitive): a container with
+ * interactive descendants must NEVER be `role="button"` (invalid HTML). So the box is a
+ * role-less `PressableRow`, an empty absolutely-positioned door sibling carries the tab stop /
+ * accessible name / focus ring, and the interior verbs lift above it via `zIndex`.
+ */
+export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth = 80, doorLabel, onOpen, actions }: LinkedRecordBoxProps) {
+  return (
+    <PressableRow onPress={onOpen} style={styles.box}>
+      <Door label={doorLabel} onPress={onOpen} />
+      <View style={styles.identity}>
+        <View style={styles.glyph}>
+          <Icon name={icon} size={17} color={colors.zinc[600]} />
+        </View>
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{name}</Text>
+          {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
+        </View>
+      </View>
+      {facts && facts.length > 0 ? (
+        <View style={{ gap: 6 }}>
+          {facts.map((f) => (
+            <View key={f.label} style={styles.fact}>
+              <Text size="sm" color="muted" style={{ width: factLabelWidth }}>{f.label}</Text>
+              <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      {actions ? (
+        <>
+          {/* full-bleed hairline fencing the verb footer off from the facts */}
+          <View style={styles.divider} />
+          <View style={styles.actions}>{actions}</View>
+        </>
+      ) : null}
+    </PressableRow>
+  );
+}
+
+// The keyboard DOOR: an empty absolutely-positioned sibling beneath the box content — a
+// button must NOT wrap the box's interactive descendants, so the door alone carries the tab
+// stop, accessible name, and focus ring; mouse presses ride the PressableRow surface.
+function Door({ label, onPress }: { label: string; onPress: () => void }) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      {...focusProps}
+      style={[styles.door, focusVisible ? { boxShadow: FOCUS_RING } : null]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
+  door: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, borderRadius: 10 },
+  identity: { flexDirection: "row", alignItems: "center", gap: 10 },
+  glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
+  fact: { flexDirection: "row", gap: 10 },
+  divider: { height: 1, backgroundColor: colors.zinc[100], marginHorizontal: -16 },
+  actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 },
+});

package/src/number_input.tsx

@@ -28,7 +28,7 @@ export interface NumberInputProps {
 export function NumberInput(props: NumberInputProps) {
   const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel } = props;
   const binding = useFormField();
-  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  const describedBy = [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") || undefined;
   const { focusVisible, focusProps } = useFocusRing({ always: true });
   const { hovered, hoverProps } = useHover();
 

package/src/radio_picker.tsx

@@ -23,15 +23,10 @@ export interface RadioPickerProps<T extends string | number | symbol> {
   options: RadioPickerOption<T>[];
   value: T;
   onValueChange: (value: T) => void;
-  /** "column" (default) stacks full-width rows — right when options carry
-   *  descriptions. "row" wraps compact options inline — right for short,
-   *  description-less choices (a quick-entry form), where a six-option
-   *  column would push the rest of the form below the fold. */
-  direction?: "column" | "row";
 }
 
 export function RadioPicker<T extends string | number | symbol>(props: RadioPickerProps<T>) {
-  const { accessibilityLabel, options, value, onValueChange, direction = "column" } = props;
+  const { accessibilityLabel, options, value, onValueChange } = props;
   const itemRefs = useRef<Array<View | null>>([]);
 
   // Roving tabindex: arrow keys move focus between options and select, matching
@@ -71,11 +66,7 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
   const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
 
   return (
-    <View
-      accessibilityRole="radiogroup"
-      accessibilityLabel={accessibilityLabel}
-      style={direction === "row" ? { flexDirection: "row", flexWrap: "wrap", gap: 4 } : undefined}
-    >
+    <View accessibilityRole="radiogroup" accessibilityLabel={accessibilityLabel}>
       {options.map((option, index) => (
         <RadioOption
           ref={(node: View | null) => {
@@ -86,7 +77,6 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
           value={option.value}
           description={option.description}
           testID={option.testID}
-          compact={direction === "row"}
           selected={value === option.value}
           isTabStop={index === tabStopIndex}
           onSelect={() => onValueChange(option.value)}
@@ -100,14 +90,13 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
 function RadioOption<T extends string | number | symbol>(
   props: RadioPickerOption<T> & {
     ref: (node: View | null) => void;
-    compact: boolean;
     selected: boolean;
     isTabStop: boolean;
     onSelect: () => void;
     onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
   },
 ) {
-  const { ref, label, description, compact, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
+  const { ref, label, description, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
 
   const handlePress = useCallback(() => {
     onSelect();
@@ -116,13 +105,14 @@ function RadioOption<T extends string | number | symbol>(
   return (
     <PressableHighlight
       focusRing
-      ref={ref}      testID={testID}
+      ref={ref}
+      testID={testID}
       style={{
         flexDirection: "row",
         alignItems: "center",
-        padding: compact ? 8 : 12,
+        padding: 12,
         borderRadius: CONTROL_RADIUS,
-        gap: compact ? 8 : 16,
+        gap: 16,
       }}
       onPress={handlePress}
       accessibilityRole="radio"
@@ -136,8 +126,8 @@ function RadioOption<T extends string | number | symbol>(
     >
       <View
         style={{
-          width: compact ? 20 : 28,
-          height: compact ? 20 : 28,
+          width: 28,
+          height: 28,
           borderRadius: 999,
           borderWidth: 1,
           borderColor: colors.border,
@@ -146,15 +136,16 @@ function RadioOption<T extends string | number | symbol>(
           alignItems: "center",
         }}
       >
-        {selected && <Icon name="check" size={compact ? 14 : 24} color={getTextColor("inverted")} />}
+        {selected && <Icon name="check" size={24} color={getTextColor("inverted")} />}
       </View>
-      {/* The text column is width-CONSTRAINED so a long description WRAPS
-          inside the pressable (unconstrained, its intrinsic width overflows
-          the hover/press surface). Column rows take the full width; compact
-          row chips keep hugging their content. */}
-      <View style={compact ? styles.textCompact : styles.text}>
-        <Text size={compact ? "sm" : undefined}>{label}</Text>
-        {!!description && <Text color="muted">{description}</Text>}
+      {/* The text column is width-CONSTRAINED (flex:1, minWidth:0) so a long
+          description WRAPS inside the pressable — unconstrained, its intrinsic
+          width would overflow the hover/press surface. */}
+      <View style={styles.text}>
+        <Text>{label}</Text>
+        {/* the annotation standard (FormField metrics): a step smaller and
+            lighter than the label, so the choice reads first */}
+        {!!description && <Text size="sm" color="zinc-500">{description}</Text>}
       </View>
     </PressableHighlight>
   );
@@ -162,5 +153,4 @@ function RadioOption<T extends string | number | symbol>(
 
 const styles = StyleSheet.create({
   text: { flex: 1, minWidth: 0 },
-  textCompact: { flexShrink: 1, minWidth: 0 },
 });

package/src/text_input_field.tsx

@@ -80,9 +80,9 @@ export function TextInputField(props: TextInputFieldProps) {
   // Tracked on the wrapping View (RN-Web forwards mouse events there reliably).
   const { hovered, hoverProps } = useHover();
 
-  // Describedby chains description and error so both are read. We join them
-  // explicitly here because React Native Web does not flatten array attrs.
-  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  // Describedby chains description, warning, and error so all are read. We join
+  // them explicitly here because React Native Web does not flatten array attrs.
+  const describedBy = [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") || undefined;
 
   const minHeight =
     numberOfLines && numberOfLines > 1