Design kit

import { StepHeader } from "components/ui/StepHeader";
import { SectionTabs, useSectionSpy } from "components/ui/SectionTabs";

<StepHeader flow="Booking request" step={1} total={6}
  onBack={goBack} help={{ label: "Ask Chloe", onPress: openChat }} />

const spy = useSectionSpy(["meals", "walks", "meds"]);
<ScrollView ref={spy.scroll} stickyHeaderIndices={[0]} onScroll={spy.onScroll} scrollEventThrottle={32}>
  <SectionTabs sections={SECTIONS} active={spy.active} onPick={spy.jump} />
  <View onLayout={spy.onSectionLayout("meals")}>…</View>
</ScrollView>
// App header + tab bar: RoleTabs / headerOptions(theme). Stepper: BookingStageBar.

import { selectable } from "components/ui/selectable";   // the one picker look
import { ChoiceChips } from "components/ui/ChoiceChips";
import { OptionCard } from "components/ui/OptionCard";
import { Button } from "components/ui/Button";

<ChoiceChips multi value={picked} onChange={setPicked}
  options={[{ value: "meals", label: "Meals" }, { value: "grooming", label: "Grooming", disabled: true }]} />
<OptionCard title="Max" detail="Dog · Maltese · 4 years" leading={<PetMark …/>}
  multi selected={on} onPress={toggle} />          // radio by default; disabled shows dashed
<Button label="Next" size="large" onPress={next} />
<Button label="Save" loading={saving} onPress={save} />   // Figma: Style × Size × State
<Button label="Cancel" variant="secondary" /> <Button label="Sign out" variant="danger" />
// A hand-rolled picker? spread selectable(theme).chip / .chipOn / .label instead of new styles.

import { TextField } from "components/ui/TextField";
import { Slider } from "components/ui/Slider";

<TextField label="Birthday" value={v} onChangeText={setV} error={err} />   // State=Error when error is set
<Slider value={km} min={1} max={100} onChange={setKm} label="Distance" valueText={`${km} km`} />
<ChoiceChips value={[String(km)]} options={[2,5,10,25].map(k => ({ value: String(k), label: `${k} km` }))}
  onChange={(v) => setKm(Number(v[0]))} />          // quick picks stay in sync with the slider
// Search pill: components/SitterSearchBar (date quick picks: quickStays(today)).

// Stepper → components/BookingStageBar · Consent card → components/ConsentCard
// Checklist row → components/ChecklistCard · Entry info → components/EntryInfoCard
// Calendar → components/ui/RangeCalendar, components/SlotCalendar
// Message bubble → components/MessageBubble · Booking card → components/BookingCard
import { PriceBreakdown } from "components/ui/PriceBreakdown";
<PriceBreakdown lines={[{ label: "3 nights × $55.00", amount: "$165.00" }]} total="$268.13 CAD" note="All fees included" />
// Rules: entry codes never in a toast or a prompt; amounts always from the server.

import { SitterResultCard } from "components/SitterResultCard";

<SitterResultCard name="Chloe" photo={url} meta="5 yrs experience" km="2 km"
  nightly={55} favorite onOpen={open} onPhoto={viewPhotos} testID="sitter-tile-Chloe" />
// Tool block → features/snap/SnapToolCard (block: "blockPeach" | "blockMint" | "blockButter").

// Pet card → components/PetCard · Daily note, Timeline row → components/DiaryTimeline
// Stat tile → components/QuickCheckIn · Feed card → components/FeedCard
// Life Record → components/LifeRecordCard · Star rating → components/StarRating
// Pictures: components/ui/Art (pending the icon pick) or the pet's photo via components/PetMark.

import { SectionTitle, sectionTitleStyle } from "components/ui/SectionTitle";
import { ListGroup, ListRow } from "components/ui/ListRow";
import { SummaryRow } from "components/ui/SummaryRow";

<SectionTitle>Account</SectionTitle>         // or heading: sectionTitleStyle(theme) in a StyleSheet
<ListGroup>
  <ListRow title="Name" detail="Robert Park" onPress={edit} />
  <ListRow title="Trip updates" trailing={{ kind: "switch", value, onChange }} />
  <ListRow title="What's new" trailing={{ kind: "badge", text: "3 new" }} onPress={open} />
  <ListRow title="Sign out" danger onPress={confirm} />
</ListGroup>
<SummaryRow label="Dates" value="Oct 9 to 12" detail="3 nights" onChange={edit} />

import { Sheet } from "components/ui/Sheet";
import { useToast } from "providers/ToastProvider";
import { ResultState } from "components/ui/ResultState";
import { AlertModal } from "components/ui/AlertModal";

<Sheet visible={open} title="Weekly rules" onClose={close} footer={<Button label="Apply" size="large" … />}>…</Sheet>
toast.show("Chat with Daniel left", { undo: rejoin });      // stays 6 s with Undo
toast.show("Couldn't send.", { tone: "error" });
<ResultState title="Request sent" message="…" action={{ label: "Next step", onPress }} />
<AlertModal visible title="Contains chicken: Max is allergic" message="…" chips={["Chicken"]}
  actionLabel="I understand, don't feed" onAcknowledge={ack} />   // no backdrop, no X, no Escape

import { Tag } from "components/ui/Tag";
import { Banner } from "components/ui/Banner";
import { Avatar } from "components/ui/Avatar";
import { PetMark } from "components/PetMark";

<Banner tone="warning" icon="⏱️" title="Running 15 minutes late" body="Chloe is on her way."
  action={{ label: "See the map", onPress }} />
<Tag label="SAFE" tone="success" />
<Avatar kind="initial" name="Chloe" />  <Avatar kind="photo" uri={url} />
<PetMark petId={id} species="dog" />   // photo, else breed photo (planned), else illustration
// Skeleton: not in the app yet (audit F45).