@lotics/ui 2.4.1 → 2.6.0

package/src/card.tsx

@@ -1,5 +1,9 @@
+import { type ReactNode } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { Divider } from "./divider";
+import { InfoPopover } from "./info_popover";
+import { Text } from "./text";
 
 interface CardProps {
   children: React.ReactNode;
@@ -11,6 +15,13 @@ interface CardProps {
  * A bordered presentational surface — view only. It never handles interaction:
  * for a pressable/selectable card use CardSelectItem (a real focusable button),
  * or compose PressableHighlight for a bespoke action.
+ *
+ * Two shapes:
+ * - Plain: `<Card>` with the default 20px padding, author owns the content.
+ * - Banded: `<Card style={{ padding: 0 }}>` composed from the family slots —
+ *   `CardHeader` (+ `CardHeaderTitle`/`CardHeaderMeta`), `CardBody`,
+ *   `CardFooter` — separated by hairlines, mirroring the Dialog/Popover
+ *   composable idiom.
  */
 export function Card(props: CardProps) {
   const { children, testID, style } = props;
@@ -22,10 +33,122 @@ export function Card(props: CardProps) {
   );
 }
 
+export interface CardHeaderProps {
+  /** Usually `CardHeaderTitle` (+ optionally `CardHeaderMeta` or any
+   * right-side node — Badge, Button, an Avatar identity row). The band is a
+   * layout slot, fully replaceable, like `DialogHeader`. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Opening band of a banded Card, closed by the hairline:
+ *
+ *   <CardHeader>
+ *     <CardHeaderTitle info="what this data shows">Công nợ</CardHeaderTitle>
+ *     <CardHeaderMeta>12 hóa đơn</CardHeaderMeta>
+ *   </CardHeader>
+ *
+ * For bespoke headers (member info with Avatar, actions) put any children in
+ * the band — padding and rhythm stay standard. Screens must not hand-compose
+ * this band.
+ */
+export function CardHeader(props: CardHeaderProps) {
+  return (
+    <>
+      <View style={[styles.headerBand, props.style]}>{props.children}</View>
+      <Divider />
+    </>
+  );
+}
+
+export interface CardHeaderTitleProps {
+  children: ReactNode;
+  /**
+   * What this card's data shows — clicking the ⓘ next to the title opens it
+   * in a popover ("Doanh thu đã xuất hóa đơn, chưa trừ chiết khấu"). A reader
+   * who doesn't already know the data shouldn't have to guess — provide this
+   * on every card whose title alone doesn't fully define the numbers.
+   */
+  info?: string;
+  /** One muted line under the title — what this section decides or contains.
+   * For settings-style cards where the title alone is too terse. */
+  description?: string;
+}
+
+/** Title slot for CardHeader — sm semibold + optional ⓘ explainer + optional
+ * description line. Grows to push siblings (meta, actions) to the right.
+ * Tabular numerals so id-like titles (SR-2026-0081) align across a list. */
+export function CardHeaderTitle(props: CardHeaderTitleProps) {
+  return (
+    <View style={styles.headerTitle}>
+      <View style={styles.headerTitleRow}>
+        <Text size="sm" weight="semibold" tabular>
+          {props.children}
+        </Text>
+        {props.info ? <InfoPopover text={props.info} accessibilityLabel="Giải thích dữ liệu" /> : null}
+      </View>
+      {props.description ? (
+        <Text size="xs" color="muted">
+          {props.description}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface CardHeaderMetaProps {
+  children: ReactNode;
+}
+
+/** Right-side context for CardHeader — a count ("12 hóa đơn"), unit, or
+ * period. xs muted, tabular for numerals. */
+export function CardHeaderMeta(props: CardHeaderMetaProps) {
+  return (
+    <Text size="xs" color="muted" tabular>
+      {props.children}
+    </Text>
+  );
+}
+
+export interface CardBodyProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Padded content band of a banded Card. Style override for gap/flex only —
+ * keep the standard padding. */
+export function CardBody(props: CardBodyProps) {
+  return <View style={[styles.body, props.style]}>{props.children}</View>;
+}
+
+export interface CardFooterProps {
+  /** Typically a muted hint (flex: 1) on the left and the band's actions on
+   * the right — one primary per surface. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Closing action band of a banded Card, opened by the hairline. */
+export function CardFooter(props: CardFooterProps) {
+  return (
+    <>
+      <Divider />
+      <View style={[styles.footerBand, props.style]}>{props.children}</View>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     padding: 20,
     borderRadius: 16,
+    // Clip banded content (full-bleed rows, their hover/selected wash) to the
+    // rounded corners. The CSS box-shadow below is painted outside the border
+    // box, so `overflow: hidden` on the same element doesn't clip it — the lift
+    // survives. In-card overlays (Peek/ActionMenu/Popover/Tooltip) are
+    // portaled, so they aren't clipped either.
+    overflow: "hidden",
     backgroundColor: colors.background,
     // 1px hairline + 2-layer shadow: the research-validated default across
     // shadcn/ui, Geist, Tailwind v4. Without either, cards on a near-white
@@ -42,4 +165,31 @@ const styles = StyleSheet.create({
         "0 1px 2px 0 rgba(38,38,38,0.06), 0 4px 12px -2px rgba(38,38,38,0.06)",
     } as ViewStyle),
   },
+  headerBand: {
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  headerTitle: {
+    flex: 1,
+    gap: 2,
+  },
+  headerTitleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
+  body: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+  },
+  footerBand: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
 });

package/src/cell_select.tsx

@@ -1,11 +1,12 @@
 import { memo, useMemo } from "react";
+import { type ColorName } from "./colors";
 import { View } from "react-native";
-import { Badge, BadgeColor } from "./badge";
+import { Badge } from "./badge";
 
 export interface SelectCellOption {
   key: string;
   name: string;
-  color?: BadgeColor;
+  color?: ColorName;
 }
 
 export interface CellSelectProps {

package/src/chip_group.tsx

@@ -0,0 +1,65 @@
+import { View } from "react-native";
+import { Text } from "./text";
+import { PressableHighlight } from "./pressable_highlight";
+import { pillSurfaceStyle } from "./control_surface";
+
+// Exclusive filter chips — the view-control sibling of the form-input
+// selectors. Picking between the one-of-N controls:
+//   - ChipGroup: a SMALL, HOT filter set (≤ ~10 short options) the user flips
+//     between constantly — every option stays visible, switching is one tap,
+//     the row wraps on narrow widths. Reads as "narrow this view".
+//   - Picker: many options or tight space — compact, but hides the set behind
+//     a click. Reads as "choose a value".
+//   - RadioPicker: a form input that SETS data on a record (radio circles
+//     signal "this writes"), not a view filter.
+// Chips carry quiet zinc styling: bordered white at rest, dark fill when
+// active — color stays reserved for status semantics and primary actions.
+
+export interface ChipOption<T extends string = string> {
+  label: string;
+  value: T;
+  testID?: string;
+}
+
+export interface ChipGroupProps<T extends string = string> {
+  /**
+   * Group name, prefixed into each chip's accessible name
+   * (`"{accessibilityLabel}: {option label}"`) so assistive tech hears the
+   * dimension being filtered, not just a bare value.
+   */
+  accessibilityLabel: string;
+  options: ChipOption<T>[];
+  /** The active option — exactly one; include an explicit "all" option for
+   *  the unfiltered state rather than modelling it as no selection. */
+  value: T;
+  onValueChange: (value: T) => void;
+}
+
+export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
+  const { accessibilityLabel, options, value, onValueChange } = props;
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <PressableHighlight
+            key={option.value}
+            testID={option.testID}
+            onPress={() => onValueChange(option.value)}
+            accessibilityRole="button"
+            accessibilityLabel={`${accessibilityLabel}: ${option.label}`}
+            accessibilityState={{ selected: active }}
+            // The shared pill-surface contract (height/border/radius/white +
+            // hover/press wash + the selected box-shadow ring); the chip only
+            // adds its horizontal padding.
+            style={(state) => [pillSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
+          >
+            <Text size="sm" weight={active ? "semibold" : "medium"} color={active ? "default" : "muted"}>
+              {option.label}
+            </Text>
+          </PressableHighlight>
+        );
+      })}
+    </View>
+  );
+}

package/src/colors.ts

@@ -298,3 +298,64 @@ export const colors = {
   background: palette.white,
   shadow: `0px 0px 6px 1px ${palette.zinc["300"]}`,
 };
+
+/**
+ * A low-alpha wash of a palette color (hover tints, dimmed chart segments,
+ * icon discs). Handles the palette's rgba() strings plus rgb()/#RRGGBB.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith("rgba(")) return color.replace(/,\s*[\d.]+\s*\)\s*$/, `, ${alpha})`);
+  if (color.startsWith("rgb(")) return color.replace("rgb(", "rgba(").replace(/\)\s*$/, `, ${alpha})`);
+  if (color.startsWith("#") && color.length === 7) {
+    return `${color}${Math.round(alpha * 255)
+      .toString(16)
+      .padStart(2, "0")}`;
+  }
+  return color;
+}
+
+/**
+ * A palette FAMILY name — the single, semantic way to reference a color across
+ * the system (Badge, status indicators, chart series, breakdown segments).
+ * Reference colors by NAME and let the component resolve the shade it needs;
+ * never thread a raw hex through props — it drifts (one call site picks 500,
+ * another 600, and the same "status" renders two greens). Excludes the
+ * non-scale role keys (border/background/shadow/black/white).
+ */
+export type ColorName = Exclude<keyof typeof colors, "border" | "border_shadow" | "background" | "shadow" | "black" | "white">;
+
+/**
+ * The canonical SOLID shade of a family (500) — status dots, status-grid
+ * cells, breakdown segments, chart series. Defined ONCE so every indicator of
+ * the same color agrees on the shade.
+ */
+export function solid(name: ColorName): string {
+  return colors[name][500];
+}
+
+/** A low-alpha wash of a family's solid shade — cell/segment tints, dimmed
+ *  states. `tint("emerald", 0.2)` === `withAlpha(solid("emerald"), 0.2)`. */
+export function tint(name: ColorName, alpha: number): string {
+  return withAlpha(solid(name), alpha);
+}
+
+/** Dark → light stops a `ramp` spans (the usable mid range of a scale). */
+const RAMP_STOPS = [700, 600, 500, 400, 300, 200] as const;
+
+/**
+ * `count` distinct shades of ONE family, strong → light — the monochrome
+ * "one hue family per dimension" data ramp (a Breakdown's segments, an ordered
+ * funnel, any multi-category breakdown of a single dimension). Use this for a
+ * COHERENT dimension instead of hand-picking shades or scattering hues; the
+ * segment LABEL carries identity, the shade only orders. (For semantic
+ * categories whose color carries MEANING — status — give each its own
+ * `ColorName` and `solid()` it, don't ramp.)
+ */
+export function ramp(name: ColorName, count: number): string[] {
+  const scale = colors[name];
+  if (count <= 1) return [scale[600]];
+  return Array.from({ length: count }, (_, i) => {
+    const idx = Math.round((i / (count - 1)) * (RAMP_STOPS.length - 1));
+    return scale[RAMP_STOPS[idx]];
+  });
+}

package/src/column_filter.tsx

@@ -1,12 +1,9 @@
 import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
-import { Icon } from "./icon";
-import { colors } from "./colors";
 import { TextInputField } from "./text_input_field";
 import { NumberInput } from "./number_input";
 import { PickerMenu } from "./picker_menu";
-import { PillButton } from "./pill_button";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { FilterPill } from "./filter_pill";
 import type { PickerOption } from "./picker";
 
 /** A column the picker can filter on. `type` selects the control + operators. */
@@ -112,20 +109,13 @@ export function ColumnFilter(props: ColumnFilterProps) {
   const active = isColumnFilterActive(value);
 
   return (
-    <Popover side="bottom" align="start">
-      <PopoverTrigger>
-        <PillButton
-          onDismiss={active ? () => onChange(undefined) : undefined}
-          dismissTooltip={clearLabel}
-        >
-          <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
-            {active ? `${column.label}: ${columnFilterSummary(column, value)}` : column.label}
-          </Text>
-          {!active ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
-        </PillButton>
-      </PopoverTrigger>
-      <PopoverContent style={styles.content}>
-        {column.type === "text" ? (
+    <FilterPill
+      label={column.label}
+      summary={active ? columnFilterSummary(column, value) : undefined}
+      onClear={() => onChange(undefined)}
+      clearLabel={clearLabel}
+    >
+      {column.type === "text" ? (
           <TextInputField
             autoFocus
             value={value?.kind === "text" ? value.query : ""}
@@ -160,16 +150,11 @@ export function ColumnFilter(props: ColumnFilterProps) {
             onValueChange={(selected) => onChange({ kind: "select", selected })}
           />
         )}
-      </PopoverContent>
-    </Popover>
+    </FilterPill>
   );
 }
 
 const styles = StyleSheet.create({
-  content: {
-    minWidth: 240,
-    gap: 8,
-  },
   range: {
     flexDirection: "row",
     alignItems: "center",

package/src/completion_state.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { solid, type ColorName } from "./colors";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+
+export interface CompletionStateProps {
+  /** The result glyph — defaults to a success check. */
+  icon?: IconName;
+  /** Accent for the glyph — defaults to emerald (success). */
+  tone?: ColorName;
+  title: string;
+  /** One line under the title — the result summary. */
+  summary?: string;
+  /** The what-next actions — `Button`s, rendered centred below. */
+  children?: ReactNode;
+}
+
+/**
+ * The "operation complete" panel — a result glyph, a title, a one-line summary,
+ * and the what-next actions. The counterpart to `EmptyState` (which frames an
+ * empty list); this frames a FINISHED process — a picked wave, a posted run, a
+ * created batch, an applied allocation. Wrap it in a `Card` for a panel.
+ */
+export function CompletionState(props: CompletionStateProps) {
+  const { icon = "circle-check", tone = "emerald", title, summary, children } = props;
+  return (
+    <View style={styles.container}>
+      <Icon name={icon} size={44} color={solid(tone)} />
+      <View style={styles.text}>
+        <Text size="lg" weight="semibold">{title}</Text>
+        {summary ? <Text size="sm" color="muted" tabular>{summary}</Text> : null}
+      </View>
+      {children ? <View style={styles.actions}>{children}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignItems: "center", gap: 14, padding: 32 },
+  text: { alignItems: "center", gap: 2 },
+  actions: { flexDirection: "row", alignItems: "center", gap: 12, paddingTop: 4 },
+});

package/src/control_surface.ts

@@ -0,0 +1,32 @@
+import { type ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+/** The system control height — every band control (chips, pills, search,
+ *  buttons) aligns to it so a toolbar row reads as one band. */
+export const CONTROL_HEIGHT = 40;
+
+/**
+ * THE pill-surface contract — the single definition of the bordered, white,
+ * rounded interactive surface shared by `ChipGroup` chips and `PillButton` (and
+ * anything composed on them). Returns the style for the CURRENT pressable state,
+ * so the hover (white → zinc-100) and press (zinc-200) washes live in ONE place
+ * instead of drifting per control — and any control built on it hovers without
+ * touching `PressableHighlight` globally. Selected adds a box-shadow ring (a
+ * crisp 2px dark edge, no layout shift). Each control adds its own padding/layout
+ * on top.
+ */
+export function pillSurfaceStyle(
+  state: { hovered?: boolean; pressed?: boolean },
+  opts?: { selected?: boolean },
+): ViewStyle {
+  const selected = opts?.selected ?? false;
+  return {
+    height: CONTROL_HEIGHT,
+    justifyContent: "center",
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: selected ? colors.zinc[900] : colors.border,
+    backgroundColor: state.pressed ? colors.zinc[200] : state.hovered ? colors.zinc[100] : colors.white,
+    boxShadow: selected ? `0 0 0 1px ${colors.zinc[900]}` : undefined,
+  };
+}

package/src/counter.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { IconButton } from "./icon_button";
+
+export interface CounterProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Announced name — the buttons become "Decrease/Increase {label}". */
+  accessibilityLabel: string;
+  /** Render the value with units ("3 nights", "2 guests"). Default: the number. */
+  format?: (value: number) => string;
+}
+
+/**
+ * A numeric stepper — − value + — for a small, bounded quantity: a guest count,
+ * a min-nights filter, an order line quantity. The Airbnb-style counter: two
+ * bordered round buttons flanking the value, a hover wash on each, dimmed at
+ * their bounds. For free numeric entry use `NumberInput`; for a wide continuous
+ * range use `RangeSlider`.
+ */
+export function Counter(props: CounterProps) {
+  const { value, onValueChange, min = 0, max = Infinity, step = 1, accessibilityLabel, format } = props;
+  const clamp = (n: number) => Math.min(max, Math.max(min, n));
+
+  return (
+    <View style={styles.row}>
+      <IconButton
+        icon="minus"
+        size="md"
+        style={styles.btn}
+        accessibilityLabel={`Decrease ${accessibilityLabel}`}
+        disabled={value <= min}
+        onPress={() => onValueChange(clamp(value - step))}
+      />
+      <Text size="sm" weight="medium" tabular align="center" style={styles.value}>
+        {format ? format(value) : String(value)}
+      </Text>
+      <IconButton
+        icon="plus"
+        size="md"
+        style={styles.btn}
+        accessibilityLabel={`Increase ${accessibilityLabel}`}
+        disabled={value >= max}
+        onPress={() => onValueChange(clamp(value + step))}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 16, alignSelf: "flex-start" },
+  btn: { width: 32, height: 32, borderWidth: 1, borderColor: colors.zinc[300] },
+  value: { minWidth: 56 },
+});

package/src/date_range_filter_field.tsx

@@ -56,15 +56,53 @@ function formatDate(date: Date | null, locale: string | undefined): string {
   }
 }
 
+/**
+ * Recognized whole periods display compactly — a range that IS a calendar
+ * month reads "Tháng 6 năm 2026" (sentence-cased via the locale), a whole
+ * year "2026", a single day one date. Anything else falls back to
+ * "start – end". Keeps the trigger scannable where dashboards live in
+ * period rhythm, not date pairs.
+ */
+function formatRangeDisplay(start: Date, end: Date, locale: string | undefined): string {
+  if (start.toDateString() === end.toDateString()) return formatDate(start, locale);
+
+  const wholeMonth =
+    start.getDate() === 1 &&
+    start.getMonth() === end.getMonth() &&
+    start.getFullYear() === end.getFullYear() &&
+    end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate();
+  if (wholeMonth) {
+    try {
+      const label = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(start);
+      return label.charAt(0).toUpperCase() + label.slice(1);
+    } catch {
+      return `${start.getMonth() + 1}/${start.getFullYear()}`;
+    }
+  }
+
+  const wholeYear =
+    start.getFullYear() === end.getFullYear() &&
+    start.getMonth() === 0 &&
+    start.getDate() === 1 &&
+    end.getMonth() === 11 &&
+    end.getDate() === 31;
+  if (wholeYear) return String(start.getFullYear());
+
+  return `${formatDate(start, locale)} – ${formatDate(end, locale)}`;
+}
+
 export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
   const { value, onValueChange, includeTime, locale, testID } = props;
   const labels = useMemo(() => ({ ...DEFAULT_FIELD_LABELS, ...props.labels }), [props.labels]);
   const [open, setOpen] = useState(false);
 
   const hasValue = Boolean(value.start.date || value.end.date);
-  const display = hasValue
-    ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
-    : labels.placeholder;
+  const display =
+    value.start.date && value.end.date
+      ? formatRangeDisplay(value.start.date, value.end.date, locale)
+      : hasValue
+        ? `${formatDate(value.start.date, locale)} – ${formatDate(value.end.date, locale)}`
+        : labels.placeholder;
 
   return (
     <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">
@@ -100,15 +138,9 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
           labels={props.labels}
           locale={locale}
         />
-        <PopoverFooter>
-          <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-            {hasValue ? (
-              <Button title={labels.clear} onPress={() => onValueChange(EMPTY_VALUE)} />
-            ) : (
-              <View />
-            )}
-            <Button title={labels.done} color="secondary" onPress={() => setOpen(false)} />
-          </View>
+        <PopoverFooter align="space-between">
+          {hasValue ? <Button title={labels.clear} onPress={() => onValueChange(EMPTY_VALUE)} /> : <View />}
+          <Button title={labels.done} color="secondary" onPress={() => setOpen(false)} />
         </PopoverFooter>
       </PopoverContent>
     </Popover>

package/src/detail_row.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+
+export interface DetailRowProps {
+  /** The field label — rendered `sm muted`. */
+  label: ReactNode;
+  /** The value — any node (a `Text`, a `Badge`, a stack). */
+  children: ReactNode;
+  /** Fixed label-column width (px) to align labels in a left column — for a peek
+   *  or form-like stack. Omit for a spread row: the label takes the slack and the
+   *  value sits at the right edge (the default drawer-detail look). */
+  labelWidth?: number;
+  /** Label text size — `xs` for a compact peek, `sm` (default) for a drawer. */
+  labelSize?: "xs" | "sm";
+  /** Min row height. Default 28. */
+  minHeight?: number;
+}
+
+/**
+ * One label + value line for a drawer / peek detail view — NOT a list row (that's
+ * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
+ * to the right edge); pass `labelWidth` to align labels in a fixed left column
+ * with the values flowing immediately after instead.
+ */
+export function DetailRow(props: DetailRowProps) {
+  const { label, children, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  return (
+    <View style={[styles.row, { minHeight }]}>
+      <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
+        {label}
+      </Text>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  flexLabel: { flex: 1 },
+});

package/src/dialog.tsx

@@ -178,30 +178,6 @@ export function Dialog(props: DialogProps) {
   );
 }
 
-// ============================================================================
-// DialogTrigger
-// ============================================================================
-
-export interface DialogTriggerProps {
-  children: React.ReactElement;
-}
-
-export function DialogTrigger({ children }: DialogTriggerProps) {
-  const { open, onOpenChange } = useDialog();
-
-  const handlePress = useCallback(() => {
-    onOpenChange(!open);
-  }, [open, onOpenChange]);
-
-  return React.cloneElement(
-    children as React.ReactElement<{
-      onPress?: () => void;
-    }>,
-    {
-      onPress: handlePress,
-    },
-  );
-}
 
 // ============================================================================
 // DialogHeader Components (Composition-based)