@oxy.so/bloom 2.10.0 → 2.12.0

package/src/creator-studio/ReleaseCard.tsx

@@ -2,7 +2,8 @@ import React, { memo, useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
-import { Button } from '../button';
+import { Badge } from '../badge';
+import { GlyphButton } from '../button';
 import { Chip } from '../chip';
 import {
   DropdownMenu,
@@ -15,6 +16,7 @@ import { RiAlbumLine } from '../icons/remix/RiAlbumLine';
 import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
@@ -24,7 +26,6 @@ import {
   COVER_RADIUS,
   CREATOR_STUDIO_CSS,
   CREATOR_STUDIO_STYLE_ID,
-  isImageUrl,
   pressDataSet,
   RELEASE_STATUS_LABELS,
   RELEASE_STATUS_TONES,
@@ -35,16 +36,27 @@ import {
 import type { ReleaseCardLabels, ReleaseCardProps, ReleaseStatusBadgeProps } from './types';
 
 /**
- * `ReleaseStatusBadge`: a release's distribution status as a `Chip` — the
- * tone per status is `RELEASE_STATUS_TONES` (draft default, in review warning,
- * scheduled info, live success, rejected error, taken down error outlined).
+ * `ReleaseStatusBadge`: a release's distribution status as a `Badge` on a label
+ * rung — the tone per status is `RELEASE_STATUS_TONES` (draft default, in
+ * review warning, scheduled info, live success, rejected error, taken down
+ * error outlined).
+ *
+ * `Badge`, not `Chip`. It is the shape the whole fleet uses for a status that
+ * is read rather than pressed — `tenancy`, `eviction` and `booking` all draw
+ * theirs as a `Badge` over a `status -> { tone, fill }` map — and a `Chip` with
+ * no `onPress` is a pill that merely looks like a control. This was a `Chip`
+ * `small`/`medium`, both 24 tall; the label rungs are 20 and 24.
  */
 export function ReleaseStatusBadge({ status, label, size = 'small', testID }: ReleaseStatusBadgeProps) {
   const { tone, fill } = RELEASE_STATUS_TONES[status];
   return (
-    <Chip size={size} color={tone} variant={fill} testID={testID}>
-      {label ?? RELEASE_STATUS_LABELS[status]}
-    </Chip>
+    <Badge
+      size={size === 'small' ? 'label-small' : 'label-medium'}
+      color={tone}
+      variant={fill}
+      content={label ?? RELEASE_STATUS_LABELS[status]}
+      testID={testID}
+    />
   );
 }
 
@@ -158,11 +170,16 @@ function ReleaseCardComponent({
     actions.length > 0 ? (
       <DropdownMenu>
         <DropdownMenuTrigger asChild label={labels.actions(release.title)}>
-          <Button
-            variant="secondary"
-            size="small"
-            iconOnly
-            leadingIcon={RiMoreFill}
+          {/* The neutral transparent ⋯: the same affordance `media-card`
+              draws, rather than a bordered `secondary` on a card that already
+              has a border. */}
+          <GlyphButton
+            size={32}
+            icon={RiMoreFill}
+            glyphSize={20}
+            color={paint.textSecondary}
+            hoverColor={paint.text}
+            ring={paint.ring}
             accessibilityLabel={labels.actions(release.title)}
             testID={testID ? `${testID}-actions` : undefined}
           />

package/src/creator-studio/TopTracksTable.tsx

@@ -9,9 +9,10 @@ import { RiArrowUpLine } from '../icons/remix/RiArrowUpLine';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { isImageUrl, resolveCreatorStudioPaint, type CreatorStudioPaint } from './shared';
+import { resolveCreatorStudioPaint, type CreatorStudioPaint } from './shared';
 import type { TopTrackTrend, TopTracksTableLabels, TopTracksTableProps } from './types';
 
 /**

package/src/creator-studio/TrackUploadRow.tsx

@@ -17,6 +17,7 @@ import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
 import { RiFileMusicLine } from '../icons/remix/RiFileMusicLine';
 import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
+import { Meter } from '../stat-bar';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -42,7 +43,7 @@ import type { TrackUploadRowLabels, TrackUploadRowProps } from './types';
  *   name      `body-medium` truncating, size `caption-1-regular` text-tertiary
  *   status    queued     "Queued" text-secondary
  *             uploading  4px bar (track / accent) + "42% · About 20 s left",
- *                        tabular; a `progressbar` named "Uploading <file>"
+ *                        tabular; a `Meter` named "Uploading <file>"
  *             processing a 40%-wide segment sweeping the track every 1.4s
  *                        (static under reduced motion) + "Transcoding…"
  *             ready      a placeholder waveform (bars from the file name) +
@@ -220,17 +221,16 @@ function TrackUploadRowComponent({
           </Text>
         </View>
         {bar === 'determinate' ? (
-          <View
-            accessibilityRole="progressbar"
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={percent}
+          <Meter
+            value={percent}
+            max={100}
+            height={BAR_HEIGHT}
+            fill={paint.accent}
+            track={paint.track}
             accessibilityLabel={labels.progress(fileName)}
+            valueText={`${percent}%`}
             testID={testID ? `${testID}-progress` : undefined}
-            style={[styles.bar, { backgroundColor: paint.track }]}
-          >
-            <View style={[styles.fill, { width: `${percent}%`, backgroundColor: paint.accent }]} />
-          </View>
+          />
         ) : bar === 'indeterminate' ? (
           <IndeterminateBar paint={paint} testID={testID ? `${testID}-processing` : undefined} />
         ) : status === 'ready' ? (

package/src/creator-studio/shared.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 
 import { ACCENT_TABLE, colorRamp, DANGER_TABLE, mixColor, resolveButtonRamps } from '../button/shared';
 import type { AccentTone } from '../theme/accent-colors';
+import { surfaceTextOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type {
   CreatorOption,
@@ -9,6 +10,7 @@ import type {
   ReleaseType,
   TrackUploadStatus,
 } from './types';
+import { clamp } from '../styles/clamp';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -59,13 +61,17 @@ export function resolveCreatorStudioPaint(theme: Theme): CreatorStudioPaint {
   const rose = colorRamp(theme.colors.negative, DANGER_TABLE);
   const green = colorRamp(theme.colors.success, ACCENT_TABLE);
   const surface = dark ? n[900] : n[100];
+  const quiet = surfaceTextOn(theme, surface);
   return {
     surface,
     inner: dark ? mixColor(surface, n[800], 0.6) : theme.colors.card,
     border: dark ? n[800] : n[200],
     text: theme.colors.text,
-    textSecondary: dark ? n[400] : n[500],
-    textTertiary: dark ? n[500] : n[400],
+    // Read off THIS card's fill, not off a ramp stop chosen against the page —
+    // the same copy of `neutral-400`/`neutral-500` that put chart-card captions
+    // at 2.42:1. `surfaceTextOn` floors them on `surface`.
+    textSecondary: quiet.textSecondary,
+    textTertiary: quiet.textTertiary,
     track: dark ? n[800] : n[200],
     ring: dark ? n[700] : n[300],
     placeholder: dark ? n[800] : n[200],
@@ -137,10 +143,14 @@ export const DEFAULT_CREDIT_ROLES: readonly CreatorOption[] = [
 //  Uploads
 // ---------------------------------------------------------------------------
 
-/** Clamps a progress value to a whole 0–100. */
+/**
+ * Clamps a progress value to a whole 0–100.
+ *
+ * NOT `clamp01` under another name: this is a PERCENTAGE and it rounds.
+ */
 export function clampProgress(value: number | undefined): number {
   if (value === undefined || !Number.isFinite(value)) return 0;
-  return Math.round(Math.min(100, Math.max(0, value)));
+  return Math.round(clamp(value, 0, 100));
 }
 
 /** What a row draws for a status: a determinate bar, a running bar, or none. */
@@ -213,17 +223,6 @@ export function artworkDimensionsError(
   return null;
 }
 
-/** A URL (or data/blob URI) rather than an ImageResolver id. */
-export function isImageUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
-
 /** Adds a string to a list once, trimmed; returns the same list when nothing changes. */
 export function addUnique(list: readonly string[], value: string, max?: number): string[] {
   const name = value.trim();

package/src/creator-studio/types.ts

@@ -2,9 +2,11 @@ import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { FileUploadFile } from '../file-upload/types';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** A Remix-style icon component: `width`, `height`, `fill`. */
-export type CreatorStudioIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type CreatorStudioIcon = BloomIconComponent;
 
 /** Which way a figure moved against the previous period. */
 export type CreatorTrend = 'up' | 'down' | 'flat';

package/src/data-table/types.ts

@@ -4,6 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { ButtonProps } from '../button/types';
 import type { AccentTone } from '../theme/accent-colors';
 import type { TableColumnLayout, TableSize } from '../table/types';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** The table's two densities, `md` ("Normal") and `sm` ("Compact"). */
 export type DataTableSize = TableSize;
@@ -150,7 +151,8 @@ export interface DataTableProps<T> {
 }
 
 /** A Remix-style icon component: `width`, `height`, `fill`. */
-export type DataTableIconComponent = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type DataTableIconComponent = BloomIconComponent;
 
 export interface DataTableRowActionProps
   extends Omit<ButtonProps, 'children' | 'variant' | 'size' | 'iconOnly' | 'icon' | 'leadingIcon' | 'trailingIcon'> {

package/src/date-picker/TimeField.tsx

@@ -0,0 +1,162 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Platform, TextInput, type TextStyle } from 'react-native';
+
+import { MENU_FONT_FAMILY } from '../floating/menu-type';
+import { DISABLED_OPACITY } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { TYPE_SCALE } from '../typography';
+import { resolveCalendarPalette } from './palette';
+import { formatTime, parseTime, snapTime, stepTime } from './time';
+import type { TimeFieldProps, TimeFieldSize } from './types';
+
+/**
+ * A time of day, typed. `DatePicker` is the day; this is the hour and minute,
+ * and it is a FIELD rather than a fourth popover — a viewing at 18:30 is four
+ * keystrokes, and a popover is the wrong instrument for four keystrokes.
+ *
+ *              width   height   text             step arrows
+ *   small      96      32       body-2-medium    yes
+ *   medium     104     38       body-medium      yes
+ *
+ * Geometry, palette and focus behaviour are `DateChipInput`'s — the
+ * `DD/MM/YYYY` chip inside the pickers — so a date and a time typed beside each
+ * other line up: 1px `chipBorder` darkening to `chipBorderFocused` on focus
+ * (the border IS the focus indicator, `outline-none`), radius 10, shadow-xs,
+ * the panel fill.
+ *
+ * It keeps its own DRAFT while typing, so the text is not reformatted under the
+ * cursor, and commits on blur or submit; Escape reverts. A draft that does not
+ * parse reverts too, rather than reporting an error the field has no room to
+ * draw — `parseTime` is forgiving enough (`9`, `930`, `9.30`, `9pm`, `21:30`)
+ * that the remaining failures really are not times.
+ *
+ * ArrowUp / ArrowDown move by `step` and commit immediately, clamped at `min`
+ * and `max` rather than wrapping. They are a convenience on a text box, not a
+ * `spinbutton`: the control is a text field, it announces itself as one, and
+ * every value it can reach can also be typed. Its NAME is
+ * `accessibilityLabel` — required, because `"--:--"` names nothing.
+ *
+ * The VALUE is always 24h `"HH:mm"`, whatever `hourFormat` draws, so it drops
+ * straight into `MeetingScheduler`'s `timeSlots` and needs no locale from the
+ * caller.
+ */
+
+const SIZE_CONFIG: Record<TimeFieldSize, { width: number; height: number; type: 'body-medium' | 'body-2-medium' }> = {
+  small: { width: 96, height: 32, type: 'body-2-medium' },
+  medium: { width: 104, height: 38, type: 'body-medium' },
+};
+
+/** `transition-colors duration-100 ease-out` on the border. Web only. */
+const FIELD_TRANSITION: WebCssStyle | null =
+  Platform.OS === 'web'
+    ? { transitionProperty: 'border-color', transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }
+    : null;
+
+function TimeFieldComponent({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  hourFormat = '24h',
+  size = 'medium',
+  disabled = false,
+  accessibilityLabel,
+  placeholder,
+  width,
+  style,
+  testID,
+}: TimeFieldProps) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);
+  const config = SIZE_CONFIG[size];
+
+  const shown = value ? formatTime(value, hourFormat) : '';
+  const [text, setText] = useState(shown);
+  const [focused, setFocused] = useState(false);
+
+  // The committed value is the source of truth; a change from outside (or a
+  // format flip) rewrites the draft.
+  useEffect(() => {
+    setText(shown);
+  }, [shown]);
+
+  const commit = (draft: string) => {
+    if (draft.trim() === '') {
+      setText('');
+      if (value !== null) onChange(null);
+      return;
+    }
+    const parsed = parseTime(draft, hourFormat);
+    const next = parsed ? snapTime(parsed, { step, min, max }) : null;
+    if (!next) {
+      setText(shown);
+      return;
+    }
+    setText(formatTime(next, hourFormat));
+    if (next !== value) onChange(next);
+  };
+
+  const nudge = (direction: 1 | -1) => {
+    const next = stepTime(value, direction, { step, min, max });
+    if (!next) return;
+    setText(formatTime(next, hourFormat));
+    if (next !== value) onChange(next);
+  };
+
+  const fieldStyle: TextStyle = {
+    width: width ?? config.width,
+    height: config.height,
+    paddingLeft: 8,
+    paddingRight: 8,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: focused ? palette.chipBorderFocused : palette.chipBorder,
+    backgroundColor: palette.panel,
+    boxShadow: palette.shadowXs,
+    color: disabled ? palette.disabledText : palette.text,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    // A `TextInput` inherits no face.
+    ...TYPE_SCALE[config.type],
+    ...MENU_FONT_FAMILY,
+    // `outline-none`: the border change is the focus indicator.
+    outlineWidth: 0,
+  };
+
+  return (
+    <TextInput
+      value={text}
+      editable={!disabled}
+      onChangeText={setText}
+      onFocus={() => setFocused(true)}
+      onBlur={() => {
+        setFocused(false);
+        commit(text);
+      }}
+      onSubmitEditing={() => commit(text)}
+      onKeyPress={(event) => {
+        const key = event.nativeEvent.key;
+        if (key === 'Escape') {
+          setText(shown);
+        } else if (key === 'ArrowUp') {
+          (event as unknown as { preventDefault?: () => void }).preventDefault?.();
+          nudge(1);
+        } else if (key === 'ArrowDown') {
+          (event as unknown as { preventDefault?: () => void }).preventDefault?.();
+          nudge(-1);
+        }
+      }}
+      placeholder={placeholder ?? (hourFormat === '12h' ? '--:-- --' : '--:--')}
+      placeholderTextColor={palette.secondaryText}
+      inputMode={hourFormat === '12h' ? 'text' : 'numeric'}
+      accessibilityLabel={accessibilityLabel}
+      aria-disabled={disabled || undefined}
+      style={[FIELD_TRANSITION, fieldStyle, style]}
+      testID={testID}
+    />
+  );
+}
+
+export const TimeField = memo(TimeFieldComponent);
+TimeField.displayName = 'TimeField';

package/src/date-picker/index.ts

@@ -2,6 +2,9 @@ export { Calendar, RangeCalendar } from './Calendar';
 export { DatePicker } from './DatePicker';
 export { DateRangePicker } from './DateRangePicker';
 export { MeetingScheduler } from './MeetingScheduler';
+export { TimeField } from './TimeField';
+// `time.ts`'s pure helpers stay internal, as `calendar-grid.ts`'s already do:
+// `formatTime`/`parseTime` are names the root barrel cannot afford.
 
 export type {
   CalendarConstraintProps,
@@ -9,6 +12,7 @@ export type {
   DatePickerProps,
   DateRange,
   DateRangePickerProps,
+  HourFormat,
   MeetingSchedulerDetails,
   MeetingSchedulerHost,
   MeetingSchedulerHourFormat,
@@ -16,5 +20,7 @@ export type {
   MeetingSchedulerProps,
   MeetingSchedulerValue,
   RangeCalendarProps,
+  TimeFieldProps,
+  TimeFieldSize,
   WeekStart,
 } from './types';

package/src/date-picker/time.ts

@@ -0,0 +1,158 @@
+import type { HourFormat } from './types';
+
+/**
+ * Time of day as the family already spells it: a 24-hour `"HH:mm"` string.
+ * `MeetingScheduler`'s `timeSlots` and `MeetingSchedulerValue.time` are the same
+ * shape, so a `TimeField` value drops straight into one.
+ *
+ * Everything here is pure, exported, and where the parsing rules live — a field
+ * that keeps its own draft cannot be tested through the DOM for every spelling
+ * somebody might type.
+ */
+
+/** Minutes since midnight, `0..1439`. */
+export type Minutes = number;
+
+const HH_MM = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+
+/** `"14:30"` → 870. `null` for anything that is not a 24h `HH:mm`. */
+export function toMinutes(value: string): Minutes | null {
+  const match = HH_MM.exec(value.trim());
+  if (!match) return null;
+  return Number(match[1]) * 60 + Number(match[2]);
+}
+
+/** 870 → `"14:30"`. Wraps within the day, so 1440 is `"00:00"`. */
+export function fromMinutes(minutes: Minutes): string {
+  const wrapped = ((Math.round(minutes) % 1440) + 1440) % 1440;
+  const h = Math.floor(wrapped / 60);
+  const m = wrapped % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+/** `"14:30"` → `"14:30"` (24h) or `"2:30 PM"` (12h). */
+export function formatTime(value: string, hourFormat: HourFormat): string {
+  const minutes = toMinutes(value);
+  if (minutes == null) return value;
+  if (hourFormat === '24h') return fromMinutes(minutes);
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  const period = h < 12 ? 'AM' : 'PM';
+  const hour12 = h % 12 === 0 ? 12 : h % 12;
+  return `${hour12}:${String(m).padStart(2, '0')} ${period}`;
+}
+
+/**
+ * What somebody typed → `"HH:mm"`, or `null` when it is not a time.
+ *
+ * Deliberately forgiving, because a field that only accepts what it printed is
+ * a field people fight: `9`, `930`, `9.30`, `9:3`, `0930`, `9 30`, `9pm`,
+ * `9:30 p.m.` and `21:30` all parse. A bare number under 24 is an HOUR (`9` is
+ * 09:00), four digits are `HHMM` (`0930`); `AM`/`PM` decides the half of the
+ * day whatever `hourFormat` says, because somebody who typed `pm` means pm.
+ * Without a marker, 24h reads the hour as given and 12h keeps `1..12` in the
+ * morning — the value is still `"HH:mm"`, so a caller never has to know which.
+ */
+export function parseTime(text: string, hourFormat: HourFormat = '24h'): string | null {
+  const raw = text.trim().toLowerCase();
+  if (raw === '') return null;
+  const period = /(^|[^a-z])(a\.?m\.?|p\.?m\.?)\s*$/.exec(raw);
+  const meridiem = period ? (period[2]!.startsWith('a') ? 'am' : 'pm') : null;
+  const digits = (meridiem ? raw.slice(0, period!.index + period![1]!.length) : raw).trim();
+
+  let hour: number;
+  let minute: number;
+  const separated = /^(\d{1,2})\s*[:.\s]\s*(\d{1,2})$/.exec(digits);
+  if (separated) {
+    hour = Number(separated[1]);
+    minute = Number(separated[2]!.padEnd(2, '0'));
+  } else if (/^\d{3,4}$/.test(digits)) {
+    hour = Number(digits.slice(0, digits.length - 2));
+    minute = Number(digits.slice(-2));
+  } else if (/^\d{1,2}$/.test(digits)) {
+    hour = Number(digits);
+    minute = 0;
+  } else {
+    return null;
+  }
+
+  if (minute > 59) return null;
+  if (meridiem) {
+    if (hour < 1 || hour > 12) return null;
+    hour = meridiem === 'pm' ? (hour % 12) + 12 : hour % 12;
+  } else if (hour > 23) {
+    return null;
+  }
+  return fromMinutes(hour * 60 + minute);
+}
+
+/**
+ * The nearest multiple of `step` minutes (or the next one up/down, per
+ * `round`), at or after `min` and at or before `max`. `step` counts from
+ * MIDNIGHT, so 15 gives :00 :15 :30 :45 whatever the bounds are — a step
+ * measured from `min` would put the round times off the grid the moment a shop
+ * opened at 09:10. Never crosses the end of the day: 23:59 rounded up to a
+ * 30-minute grid stays inside it rather than wrapping to the other end.
+ */
+export function snapTime(
+  value: string,
+  {
+    step = 1,
+    min,
+    max,
+    round = 'nearest',
+  }: { step?: number; min?: string; max?: string; round?: 'nearest' | 'up' | 'down' } = {},
+): string | null {
+  const minutes = toMinutes(value);
+  if (minutes == null) return null;
+  const size = Math.max(1, Math.round(step));
+  const scaled = minutes / size;
+  let snapped =
+    (round === 'up' ? Math.ceil(scaled) : round === 'down' ? Math.floor(scaled) : Math.round(scaled)) *
+    size;
+  const low = min ? toMinutes(min) : null;
+  const high = max ? toMinutes(max) : null;
+  if (low != null && high != null && low > high) return null;
+  if (low != null && snapped < low) snapped = low;
+  if (high != null && snapped > high) snapped = high;
+  // Never past the end of the day: rounding 23:59 up to a 30-minute grid lands
+  // on 24:00, which `fromMinutes` would wrap to midnight — the other end.
+  if (snapped > 1439) snapped = high ?? 1439;
+  if (snapped < 0) snapped = low ?? 0;
+  return fromMinutes(snapped);
+}
+
+/**
+ * One arrow press: `direction * step` minutes from `value`, or the first time
+ * inside the bounds when there is no value yet. Clamps at the bounds rather
+ * than wrapping — a wrap past `max` back to `min` reads as the field refusing
+ * the key.
+ */
+export function stepTime(
+  value: string | null,
+  direction: 1 | -1,
+  { step = 1, min, max }: { step?: number; min?: string; max?: string } = {},
+): string | null {
+  const size = Math.max(1, Math.round(step));
+  const low = min ? toMinutes(min) : null;
+  const high = max ? toMinutes(max) : null;
+  if (low != null && high != null && low > high) return null;
+  const current = value ? toMinutes(value) : null;
+  if (current == null) {
+    // Into the range, not past it: up from the earliest allowed time rounds UP
+    // onto the grid, down from the latest rounds DOWN.
+    const start = direction === 1 ? (low ?? 0) : (high ?? 1439);
+    return snapTime(fromMinutes(start), {
+      step: size,
+      min,
+      max,
+      round: direction === 1 ? 'up' : 'down',
+    });
+  }
+  let next = current + direction * size;
+  if (low != null && next < low) next = low;
+  if (high != null && next > high) next = high;
+  if (next < 0) next = 0;
+  if (next > 1439) next = 1439;
+  return fromMinutes(next);
+}

package/src/date-picker/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 /** An inclusive range of calendar days. Both ends are local-midnight `Date`s. */
 export interface DateRange {
@@ -126,8 +126,14 @@ export interface MeetingSchedulerValue {
   time: string | null;
 }
 
-/** The hour-format toggle. */
-export type MeetingSchedulerHourFormat = '12h' | '24h';
+/**
+ * How a time of day is drawn. The VALUE is always a 24h `"HH:mm"` string —
+ * this decides only what the reader sees.
+ */
+export type HourFormat = '12h' | '24h';
+
+/** The hour-format toggle. An alias of {@link HourFormat}. */
+export type MeetingSchedulerHourFormat = HourFormat;
 
 /** Fixed strings, overridable for localisation. */
 export interface MeetingSchedulerLabels {
@@ -169,3 +175,46 @@ export interface MeetingSchedulerProps extends CalendarConstraintProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+/** `small` is a 32-tall field with body-2 text; `medium` (default) 38 with body. */
+export type TimeFieldSize = 'small' | 'medium';
+
+export interface TimeFieldProps {
+  /**
+   * The time as a 24h `"HH:mm"` string, or `null` while the field is empty.
+   * Fully controlled. The same shape `MeetingScheduler` uses, so a value drops
+   * straight into one of its `timeSlots`.
+   */
+  value: string | null;
+  /**
+   * Called with the committed time — on blur, on submit, or on an arrow key.
+   * `null` when the field has been emptied. Never called while typing.
+   */
+  onChange: (value: string | null) => void;
+  /** Earliest time, 24h `"HH:mm"`. A typed time before it is pulled up to it. */
+  min?: string;
+  /** Latest time, 24h `"HH:mm"`. A typed time after it is pulled back to it. */
+  max?: string;
+  /**
+   * Minutes one arrow press moves, and the grid a typed time snaps to. Default
+   * `1` (no snapping); pass `15` or `30` for a booking grid. Counted from
+   * midnight, so 15 always means :00 :15 :30 :45.
+   */
+  step?: number;
+  /** How the time is DRAWN. Default `'24h'`; the value stays 24h either way. */
+  hourFormat?: HourFormat;
+  /** Default `medium`. */
+  size?: TimeFieldSize;
+  disabled?: boolean;
+  /**
+   * The NAME of the time ("Viewing time", "Check-in"). Required: the field
+   * draws no label of its own, and `"--:--"` names nothing.
+   */
+  accessibilityLabel: string;
+  /** The text while empty. Default `"--:--"`, or `"--:-- --"` in 12h. */
+  placeholder?: string;
+  /** Fixed width. Default: 104 at `medium`, 96 at `small`. */
+  width?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}