@olympusoss/canvas 3.2.1 → 5.0.0

package/src/molecules/fieldset/fieldset.styles.ts

@@ -0,0 +1,79 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+
+// Co-located Fieldset styles. Layout-only parts are static objects; anything that
+// reads a color is a function of the active tokens (so the bordered surface
+// follows light/dark and reads as glass when the ThemeProvider's surface is
+// "glass", since tokens.card is swapped translucent at the theming level). The
+// responsive collapse (two-column -> single column at the `sm` breakpoint) is
+// driven by useResponsive in the component.
+
+export type Surface = "bordered" | "plain";
+
+// Outer container: full width, capped at 576px. (w-full max-w-[576px])
+export const containerBase: ViewStyle = { width: "100%", maxWidth: 576 };
+
+// Surface fill/border per axis. Bordered is a card-like section with border,
+// radius, and padding (rounded-lg border border-border bg-card p-5); plain has
+// no chrome.
+export function surface(tokens: ColorTokens, s: Surface): ViewStyle {
+  if (s === "bordered") {
+    return {
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: tokens.border,
+      backgroundColor: tokens.card,
+      padding: 20,
+    };
+  }
+  return {};
+}
+
+// The disabled dim applied to the whole group. (opacity-60)
+export const disabledDim: ViewStyle = { opacity: 0.6 };
+
+// --- header -----------------------------------------------------------------
+
+// Header block above the controls. (mb-4)
+export const header: ViewStyle = { marginBottom: 16 };
+
+// Legend heading. (text-base font-semibold text-foreground)
+export function legend(tokens: ColorTokens): TextStyle {
+  return { fontSize: 16, lineHeight: 24, fontWeight: "600", color: tokens.foreground };
+}
+
+// Muted supporting line under the legend. (mt-1 text-xs text-muted-foreground)
+export function description(tokens: ColorTokens): TextStyle {
+  return { marginTop: 4, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// --- field rows -------------------------------------------------------------
+
+// A field's persistent label above its control. (mb-1.5 text-sm font-medium text-foreground)
+export function fieldLabel(tokens: ColorTokens): TextStyle {
+  return { marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground };
+}
+
+// Muted help line beneath the control. (mt-1.5 text-xs text-muted-foreground)
+export function fieldHelp(tokens: ColorTokens): TextStyle {
+  return { marginTop: 6, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// Inline error beneath the control. (mt-1.5 text-xs text-destructive)
+export function fieldError(tokens: ColorTokens): TextStyle {
+  return { marginTop: 6, fontSize: 12, lineHeight: 16, color: tokens.destructive };
+}
+
+// A single field's wrapper. (w-full)
+export const fieldWrap: ViewStyle = { width: "100%" };
+
+// --- groups -----------------------------------------------------------------
+
+// The checkbox group stack. (gap-2)
+export const checkboxGroup: ViewStyle = { gap: 8 };
+
+// The single-column field group. (flex-col gap-4)
+export const groupColumn: ViewStyle = { flexDirection: "column", gap: 16 };
+
+// `grow` on a two-column item. (grow)
+export const itemGrow: ViewStyle = { flexGrow: 1 };

package/src/molecules/fieldset/fieldset.tsx

@@ -0,0 +1,182 @@
+import { type ReactNode } from "react";
+import { type DimensionValue } from "react-native";
+import { View, Text, useTheme, useResponsive, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Input } from "../../atoms/input/input.js";
+import { Checkbox } from "../../atoms/checkbox/checkbox.js";
+import * as s from "./fieldset.styles.js";
+import { type Surface } from "./fieldset.styles.js";
+
+// Fieldset: a labeled group of related form controls. A legend names the group,
+// an optional description explains it, and a field group stacks the controls so
+// the set reads as one labeled unit. For the docs playground (data-only, no JSX
+// children) it also accepts a flat `items` array that renders stacked
+// label + <Input> rows, or a `checkboxes` array that renders a checkbox group.
+//
+// Boolean-prop API: one boolean per option, grouped by axis, first-match
+// precedence within an axis (mirrors Card's surfaceOf). Axes:
+//
+// - Surface: `bordered` (a bordered, padded card-like section) vs. the plain
+//   default (a borderless group).
+// - Columns: `twoColumn` lays the field group out in two columns (it collapses
+//   to one column on small screens); omit for the single-column stack.
+// - State: `disabled` dims the whole group and disables every control inside.
+// - `error` flags a validation problem on the field group (shown via a default
+//   inline message when `items` are rendered and no per-item error is set).
+
+export interface FieldsetItem {
+  /** The field's persistent label, shown above the control. */
+  label: string;
+  /** Optional example/format hint shown inside the control. */
+  placeholder?: string;
+  /** Optional value rendered into the control. */
+  value?: string;
+  /** Optional muted help line beneath the control. */
+  help?: string;
+  /** Optional inline error beneath the control (takes precedence over help). */
+  error?: string;
+}
+
+export interface FieldsetProps {
+  children?: ReactNode;
+  /** The group's name, rendered as the legend heading. */
+  legend?: string;
+  /** A muted supporting line beneath the legend. */
+  description?: string;
+  /** Data-only field rows: each renders a label + <Input>. */
+  items?: FieldsetItem[];
+  /** Data-only checkbox rows: each renders a <Checkbox> with the label. */
+  checkboxes?: { label: string; checked?: boolean }[];
+  // Surface (pick one; default is the plain, borderless group).
+  bordered?: boolean;
+  // Columns (orthogonal): two-column field grid, collapses to one when narrow.
+  twoColumn?: boolean;
+  // State (orthogonal booleans).
+  disabled?: boolean;
+  /** Flags a validation problem on the group. */
+  error?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Surface precedence when more than one is passed: first match wins.
+function surfaceOf(p: FieldsetProps): Surface {
+  if (p.bordered) return "bordered";
+  return "plain";
+}
+
+// One labeled field: label + control + optional help/error.
+function Field({
+  item,
+  disabled,
+  error,
+}: {
+  item: FieldsetItem;
+  disabled?: boolean;
+  error?: boolean;
+}) {
+  const { tokens } = useTheme();
+  const msg = item.error ?? (error ? "Enter a valid value" : "");
+  return (
+    <View style={s.fieldWrap}>
+      {item.label ? <Text style={s.fieldLabel(tokens)}>{item.label}</Text> : null}
+      <Input value={item.value} placeholder={item.placeholder} disabled={disabled} error={!!msg} block />
+      {msg ? (
+        <Text style={s.fieldError(tokens)}>{msg}</Text>
+      ) : item.help ? (
+        <Text style={s.fieldHelp(tokens)}>{item.help}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+// The two-column field group: rows flow into a wrapping row that collapses to a
+// single column on small screens (flex-row flex-wrap sm:flex-col), and each item
+// takes ~47% width and grows, going full width when stacked (w-[47%] grow sm:w-full).
+function TwoColumnGroup({
+  rows,
+  disabled,
+  error,
+}: {
+  rows: FieldsetItem[];
+  disabled?: boolean;
+  error?: boolean;
+}) {
+  const direction = useResponsive<"row" | "column">({ base: "row", sm: "column" });
+  const itemWidth = useResponsive<DimensionValue>({ base: "47%", sm: "100%" });
+  return (
+    <View style={{ flexDirection: direction, flexWrap: "wrap", gap: 16 }}>
+      {rows.map((item, i) => (
+        <View key={i} style={[{ width: itemWidth }, s.itemGrow]}>
+          <Field item={item} disabled={disabled} error={error} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function Fieldset(props: FieldsetProps) {
+  const { children, legend, description, items, checkboxes, twoColumn, disabled, error, style } = props;
+  const { tokens } = useTheme();
+  const surface = surfaceOf(props);
+
+  const container: StyleProp<ViewStyle> = [
+    s.containerBase,
+    s.surface(tokens, surface),
+    disabled ? s.disabledDim : null,
+    style,
+  ];
+
+  const header =
+    legend != null || description != null ? (
+      <View style={s.header}>
+        {legend != null ? <Text style={s.legend(tokens)}>{legend}</Text> : null}
+        {description != null ? <Text style={s.description(tokens)}>{description}</Text> : null}
+      </View>
+    ) : null;
+
+  // Children win: when composed, render exactly what the caller passed.
+  if (children != null) {
+    return (
+      <View style={container}>
+        {header}
+        {children}
+      </View>
+    );
+  }
+
+  // Checkbox group: a stacked set of labeled checkboxes.
+  if (checkboxes != null) {
+    return (
+      <View style={container}>
+        {header}
+        <View style={s.checkboxGroup}>
+          {checkboxes.map((c, i) => (
+            <Checkbox key={i} checked={c.checked} disabled={disabled}>
+              {c.label}
+            </Checkbox>
+          ))}
+        </View>
+      </View>
+    );
+  }
+
+  // Field group: stacked rows, or a two-column wrap that collapses when narrow.
+  const rows = items ?? [];
+
+  return (
+    <View style={container}>
+      {header}
+      {twoColumn ? (
+        <TwoColumnGroup rows={rows} disabled={disabled} error={error} />
+      ) : (
+        <View style={s.groupColumn}>
+          {rows.map((item, i) => (
+            <View key={i} style={s.fieldWrap}>
+              <Field item={item} disabled={disabled} error={error} />
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/molecules/form/form.md

@@ -0,0 +1,137 @@
+# Form Layouts
+
+Stacked, two-column, with sidebar description.
+
+## Usage
+
+```tsx
+<Form
+  stacked
+  fields={[
+    { label: "Email", placeholder: "you@example.com" },
+    { label: "Password" }
+  ]}
+  submitLabel="Sign in"
+  style={{ maxWidth: 360 }}
+/>
+```
+
+## Variants
+
+### Layout - two-column
+
+```tsx
+<Form
+  twoColumn
+  fields={[
+    { label: "First name", placeholder: "Ada" },
+    { label: "Last name", placeholder: "King" },
+    { label: "Email", placeholder: "ada@example.com" }
+  ]}
+  submitLabel="Create"
+  cancelLabel="Cancel"
+  style={{ maxWidth: 560 }}
+/>
+```
+
+### Layout - sidebar
+
+```tsx
+<Form
+  sidebar
+  sections={[
+    { title: "Personal info", description: "This information will be displayed on your public profile.", fields: [
+      { label: "Full name", value: "Rachel Chen" },
+      { label: "Email", value: "rachel@example.com" }
+    ] },
+    { title: "Notifications", description: "Choose how you'd like to be notified.", checkboxes: [
+      { label: "Email notifications", checked: true },
+      { label: "SMS alerts" }
+    ] }
+  ]}
+  submitLabel="Save"
+  style={{ maxWidth: 720 }}
+/>
+```
+
+## Do & Don't
+
+### Stacked
+
+**Do** — Keep short forms one field per row so each label sits directly above its input and the eye flows straight down.
+
+```tsx
+<Form stacked submitLabel="Sign in" style={{ maxWidth: 360 }} fields={[
+    { label: "Email", placeholder: "you@example.com" },
+    { label: "Password" }
+  ]} />
+```
+
+**Don't** — Pairing an email and password side by side cramps a sign-in form and breaks the natural top-to-bottom reading order.
+
+```tsx
+<Form twoColumn submitLabel="Sign in" style={{ maxWidth: 360 }} fields={[
+    { label: "Email", placeholder: "you@example.com" },
+    { label: "Password" }
+  ]} />
+```
+
+### Two-column
+
+**Do** — Pair fields of similar width (city / ZIP) in a row and give a full-width field like the street its own line.
+
+```tsx
+<View style={{ maxWidth: 560 }}>
+  <View style={{ marginBottom: 12 }}>
+    <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Street address</Text>
+    <Input placeholder="123 Market St" />
+  </View>
+  <View style={{ flexDirection: "row", gap: 12 }}>
+    <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+      <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>City</Text>
+      <Input placeholder="San Francisco" />
+    </View>
+    <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+      <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>ZIP</Text>
+      <Input placeholder="94103" />
+    </View>
+  </View>
+</View>
+```
+
+**Don't** — Putting a wide field next to a tiny one in the same two-column row leaves the short input awkwardly oversized.
+
+```tsx
+<Form twoColumn submitLabel="Save" style={{ maxWidth: 560 }} fields={[
+    { label: "Street address", placeholder: "123 Market St" },
+    { label: "ZIP", placeholder: "94103" }
+  ]} />
+```
+
+### Sidebar
+
+**Do** — Pair each sidebar heading with a line of helper text so the left column explains what the section's fields are for.
+
+```tsx
+<Form sidebar submitLabel="Save" style={{ maxWidth: 720 }} sections={[
+    { title: "Personal info", description: "Displayed on your public profile.", fields: [
+      { label: "Full name", value: "Rachel Chen" }
+    ] },
+    { title: "Billing", description: "Used for invoices and receipts.", fields: [
+      { label: "Card number", value: "•••• 4242" }
+    ] }
+  ]} />
+```
+
+**Don't** — A bare section heading with no helper text wastes the sidebar column and gives the user no context for the group.
+
+```tsx
+<Form sidebar submitLabel="Save" style={{ maxWidth: 720 }} sections={[
+    { title: "Personal info", fields: [
+      { label: "Full name", value: "Rachel Chen" }
+    ] },
+    { title: "Billing", fields: [
+      { label: "Card number", value: "•••• 4242" }
+    ] }
+  ]} />
+```

package/src/molecules/form/form.styles.ts

@@ -0,0 +1,39 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+
+// Co-located Form styles. The responsive collapse (side-by-side -> stacked at the
+// `sm` breakpoint) is driven by useResponsive in the component; these are the
+// static fragments and the token-colored text it composes.
+
+export function label(tokens: ColorTokens): TextStyle {
+  return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground };
+}
+
+export function helper(tokens: ColorTokens): TextStyle {
+  return { marginTop: 6, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+export function sectionDescription(tokens: ColorTokens): TextStyle {
+  return { marginTop: 4, fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}
+
+// The hairline under every section except the last.
+export function sectionDivider(tokens: ColorTokens): ViewStyle {
+  return { borderBottomWidth: 1, borderColor: tokens.border, paddingBottom: 24 };
+}
+
+// Field-label inset above its input.
+export const labelSpacing: TextStyle = { marginBottom: 6 };
+
+// Section/sidebar heading: bumps the label weight from medium to semibold.
+export const headingWeight: TextStyle = { fontWeight: "600" };
+
+// flex-1 vs flex-auto (the two-column item basis, base vs sm).
+export const flex1: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+export const flexAuto: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "auto" };
+
+export const actions: ViewStyle = { marginTop: 8, flexDirection: "row", justifyContent: "flex-end", gap: 8 };
+
+// Outer stacks, by layout.
+export const stackGap4: ViewStyle = { gap: 16 };
+export const stackGap6: ViewStyle = { gap: 24 };

package/src/molecules/form/form.tsx

@@ -0,0 +1,246 @@
+import { type ReactNode } from "react";
+import { type DimensionValue } from "react-native";
+import { View, Text, useTheme, useResponsive, type ViewStyle } from "../../style/index.js";
+import { Button } from "../../atoms/button/button.js";
+import { Checkbox } from "../../atoms/checkbox/checkbox.js";
+import { Input } from "../../atoms/input/input.js";
+import * as s from "./form.styles.js";
+
+/** A single labeled field in a form. */
+export interface FormField {
+  /** Visible label above (or beside) the input. */
+  label: string;
+  /** Placeholder shown while the field is empty. */
+  placeholder?: string;
+  /** Pre-filled value shown in the input (controlled). */
+  value?: string;
+  /** Optional helper text rendered below the input. */
+  helper?: string;
+}
+
+/** A checkbox row in a form section's checkbox group. */
+export interface FormCheckbox {
+  /** Visible label beside the box. */
+  label: string;
+  /** Whether the box starts ticked. */
+  checked?: boolean;
+}
+
+/**
+ * A titled section of a sectioned (sidebar) form: a heading + description in the
+ * left column spanning a group of fields, or a checkbox group, on the right.
+ */
+export interface FormSection {
+  /** Section heading (left column). */
+  title: string;
+  /** Muted supporting line under the heading. */
+  description?: string;
+  /** Input fields stacked in the right column. */
+  fields?: FormField[];
+  /** Checkbox group in the right column (mutually exclusive with fields). */
+  checkboxes?: FormCheckbox[];
+}
+
+export interface FormProps {
+  /** The labeled fields to render, in order. */
+  fields: FormField[];
+  /** Label for the primary submit button (defaults to "Submit"). */
+  submitLabel?: string;
+  /** When set, renders an outline cancel button before the submit button. */
+  cancelLabel?: string;
+  // Layout (pick one; first match wins). Default is the stacked layout.
+  /** Stacked: each label sits directly above its full-width input. */
+  stacked?: boolean;
+  /** Two-column: fields flow into a two-up grid that collapses on phones. */
+  twoColumn?: boolean;
+  /** Sidebar: label and helper sit in a left column, input on the right. */
+  sidebar?: boolean;
+  /**
+   * Sectioned sidebar layout: each section's heading + description sit in the
+   * left column and span a group of fields (or a checkbox group) on the right,
+   * separated by hairline dividers. Takes effect with the sidebar layout and
+   * replaces the per-field rows. The actions row renders after the last section.
+   */
+  sections?: FormSection[];
+  /** Escape hatch for layout/positioning composition (mainly width, e.g. maxWidth). */
+  style?: ViewStyle;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+}
+
+type Layout = "stacked" | "twoColumn" | "sidebar";
+
+// Layout precedence when more than one is passed: first match wins.
+function layoutOf(p: FormProps): Layout {
+  if (p.stacked) return "stacked";
+  if (p.twoColumn) return "twoColumn";
+  if (p.sidebar) return "sidebar";
+  return "stacked";
+}
+
+function Helper({ text }: { text?: string }) {
+  const { tokens } = useTheme();
+  if (!text) return null;
+  return <Text style={s.helper(tokens)}>{text}</Text>;
+}
+
+// A label sitting above its input (stacked and two-column layouts).
+function StackedField({ field }: { field: FormField }) {
+  const { tokens } = useTheme();
+  return (
+    <View>
+      <Text style={[s.label(tokens), s.labelSpacing]}>{field.label}</Text>
+      <Input placeholder={field.placeholder} value={field.value} />
+      <Helper text={field.helper} />
+    </View>
+  );
+}
+
+// One titled section of a sectioned sidebar form: heading + description on the
+// left, a group of inputs or a checkbox group on the right. Desktop-first:
+// side-by-side on wide viewports, collapsing to stacked on small screens. The
+// hairline divider sits on every section except the last.
+function Section({ section, last }: { section: FormSection; last: boolean }) {
+  const { tokens } = useTheme();
+  const row = useResponsive<ViewStyle>({
+    base: { flexDirection: "row", gap: 32 },
+    sm: { flexDirection: "column", gap: 12 },
+  });
+  const leftWidth = useResponsive<DimensionValue>({ base: 200, sm: "100%" });
+  const rightFull = useResponsive<ViewStyle>({ base: {}, sm: { width: "100%" } });
+  return (
+    <View style={[{ alignItems: "flex-start" }, row, last ? null : s.sectionDivider(tokens)]}>
+      <View style={{ width: leftWidth }}>
+        <Text style={[s.label(tokens), s.headingWeight]}>{section.title}</Text>
+        {section.description ? <Text style={s.sectionDescription(tokens)}>{section.description}</Text> : null}
+      </View>
+      <View style={[s.flex1, { gap: 12 }, rightFull]}>
+        {section.checkboxes
+          ? section.checkboxes.map((c, i) => (
+              <Checkbox key={i} checked={c.checked}>
+                {c.label}
+              </Checkbox>
+            ))
+          : (section.fields ?? []).map((field, i) => (
+              <View key={i}>
+                <Text style={[s.label(tokens), s.labelSpacing]}>{field.label}</Text>
+                <Input placeholder={field.placeholder} value={field.value} />
+                <Helper text={field.helper} />
+              </View>
+            ))}
+      </View>
+    </View>
+  );
+}
+
+// A label/helper column on the left with the input on the right. Desktop-first:
+// side-by-side on wide viewports, collapsing to stacked on small screens.
+function SidebarField({ field }: { field: FormField }) {
+  const { tokens } = useTheme();
+  const row = useResponsive<ViewStyle>({
+    base: { flexDirection: "row", gap: 32 },
+    sm: { flexDirection: "column", gap: 6 },
+  });
+  const leftWidth = useResponsive<DimensionValue>({ base: "33.3333%", sm: "100%" });
+  const rightFull = useResponsive<ViewStyle>({ base: {}, sm: { width: "100%" } });
+  return (
+    <View style={[{ alignItems: "flex-start" }, row]}>
+      <View style={{ width: leftWidth }}>
+        <Text style={[s.label(tokens), s.headingWeight]}>{field.label}</Text>
+        <Helper text={field.helper} />
+      </View>
+      <View style={[s.flex1, rightFull]}>
+        <Input placeholder={field.placeholder} value={field.value} />
+      </View>
+    </View>
+  );
+}
+
+// The two-column body: fields flow into a wrapping row that collapses to a
+// single column on small screens; each item is flex-1 (flex-auto when stacked).
+function TwoColumnBody({ fields }: { fields: FormField[] }) {
+  const direction = useResponsive<"row" | "column">({ base: "row", sm: "column" });
+  const itemBasis = useResponsive<ViewStyle>({ base: s.flex1, sm: s.flexAuto });
+  return (
+    <View style={{ flexDirection: direction, flexWrap: "wrap", gap: 16 }}>
+      {fields.map((field, i) => (
+        <View key={i} style={[itemBasis, { minWidth: 200 }]}>
+          <StackedField field={field} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function Actions({
+  submitLabel,
+  cancelLabel,
+  onSubmit,
+  onCancel,
+}: {
+  submitLabel: string;
+  cancelLabel?: string;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+}): ReactNode {
+  return (
+    <View style={s.actions}>
+      {cancelLabel ? (
+        <Button outline onPress={onCancel}>
+          {cancelLabel}
+        </Button>
+      ) : null}
+      <Button primary onPress={onSubmit}>
+        {submitLabel}
+      </Button>
+    </View>
+  );
+}
+
+export function Form(props: FormProps) {
+  const { fields, submitLabel = "Submit", cancelLabel, style, onSubmit, onCancel } = props;
+  const layout = layoutOf(props);
+
+  if (layout === "twoColumn") {
+    return (
+      <View style={[s.stackGap4, style]}>
+        <TwoColumnBody fields={fields} />
+        <Actions submitLabel={submitLabel} cancelLabel={cancelLabel} onSubmit={onSubmit} onCancel={onCancel} />
+      </View>
+    );
+  }
+
+  if (layout === "sidebar") {
+    // Sectioned sidebar: section headings span a group of fields / a checkbox
+    // group. Falls back to the per-field sidebar when no sections are given.
+    const sections = props.sections;
+    if (sections && sections.length > 0) {
+      return (
+        <View style={[s.stackGap6, style]}>
+          {sections.map((section, i) => (
+            <Section key={i} section={section} last={i === sections.length - 1} />
+          ))}
+          <Actions submitLabel={submitLabel} cancelLabel={cancelLabel} onSubmit={onSubmit} onCancel={onCancel} />
+        </View>
+      );
+    }
+    return (
+      <View style={[s.stackGap6, style]}>
+        {fields.map((field, i) => (
+          <SidebarField key={i} field={field} />
+        ))}
+        <Actions submitLabel={submitLabel} cancelLabel={cancelLabel} onSubmit={onSubmit} onCancel={onCancel} />
+      </View>
+    );
+  }
+
+  // stacked (default): one field per row, full width, label above input.
+  return (
+    <View style={[s.stackGap4, style]}>
+      {fields.map((field, i) => (
+        <StackedField key={i} field={field} />
+      ))}
+      <Actions submitLabel={submitLabel} cancelLabel={cancelLabel} onSubmit={onSubmit} onCancel={onCancel} />
+    </View>
+  );
+}