@delacour/react-native-ui 0.1.0-alpha.3

package/src/components/input/input.variants.ts

@@ -0,0 +1,329 @@
+import type { VariantProps } from "tailwind-variants";
+import { cn } from "../../lib/cn";
+import { tv } from "../../lib/tv";
+import type { ButtonGroupOrientation, ButtonGroupSlotPosition } from "../button/button.variants";
+
+export const INPUT_VARIANTS = ["primary", "secondary"] as const;
+
+export const INPUT_SIZES = ["sm", "md", "lg"] as const;
+
+export type InputVariant = (typeof INPUT_VARIANTS)[number];
+export type InputSize = (typeof INPUT_SIZES)[number];
+
+/** Theme token an icon in a decorator inherits, and the one it takes when invalid. */
+export const INPUT_DECORATOR_ICON_TOKEN = "muted-foreground";
+export const INPUT_INVALID_DECORATOR_ICON_TOKEN = "destructive";
+
+/**
+ * Default colours for the three `TextInput` props that take a colour rather
+ * than a style — the placeholder, and the caret and selection highlight.
+ *
+ * These are `accent-*` utilities, not `text-*` ones, and that is not a style
+ * choice. Uniwind bridges a className to one of these props by compiling it and
+ * reading `styles.accentColor`, so a class that sets any other property
+ * resolves to nothing: uniwind warns once in development and the prop is left
+ * undefined, which reads as "the platform default" rather than as an error.
+ */
+export const INPUT_PLACEHOLDER_ACCENT_CLASS = "accent-muted-foreground";
+export const INPUT_SELECTION_ACCENT_CLASS = "accent-primary";
+export const INPUT_INVALID_SELECTION_ACCENT_CLASS = "accent-destructive";
+
+/**
+ * Styling for every part of a text field.
+ *
+ * One slotted `tv()` rather than a call per part, so `size` and `variant` are
+ * declared once — and, more importantly here, so the box is declared once. The
+ * `root` slot is the whole bordered box, and it lands on the `TextInput` when
+ * the field stands alone or on `Input.Group`'s row when it does not. That is
+ * what makes a grouped field identical to a lone one by construction rather
+ * than by two class strings happening to agree; `input.variants.test.ts` pins
+ * it as a property over every combination of the axes.
+ *
+ * `root` therefore holds no `text-*` utility. When the field is grouped that
+ * slot is worn by a `View`, and a React Native `View` does not cascade colour
+ * to a `Text` descendant — so the type scale and the colour live on `field`,
+ * which is always the `TextInput` itself. See AGENTS.md rule 1.
+ *
+ * A size names tokens rather than raw utilities: `h-input-md` for the box,
+ * `text-input-md` for the value, `size-icon-md` for a decorator's glyph. The
+ * values live in `tokens.css`, so a field and the icon inside it resolve
+ * against one scale rather than two numbers happening to agree. `cn` and `tv`
+ * both have to know these token names — see `lib/cn.ts` and `styles/tokens.ts`.
+ *
+ * Prefix and suffix share the one `decorator` slot. They are the same box in
+ * different places, and a second identical slot is a second definition that can
+ * drift.
+ *
+ * Free of React Native imports so it stays unit-testable — `bun test` cannot
+ * parse React Native's Flow-typed source. See AGENTS.md.
+ */
+export const inputVariants = tv({
+	slots: {
+		root: "overflow-hidden border",
+		/** Layout for the group's row. Never applied to a lone field, which is not a row. */
+		row: "flex-row items-center",
+		/*
+		 * The one text surface in this package that is not a `Text`: a raw React
+		 * Native `TextInput`, which inherits nothing. `font-sans` is restated for
+		 * the same reason `TEXT_BASE_CLASS` carries it — without it a themed
+		 * typeface would stop at the field's edge.
+		 */
+		field: "font-sans text-foreground",
+		decorator: "items-center justify-center",
+		/** Edge length an `Icon` in a decorator inherits. */
+		decoratorIcon: "",
+		/** Treatment a bare `Text` affix in a decorator inherits. */
+		decoratorText: "text-muted-foreground",
+	},
+	variants: {
+		variant: {
+			primary: { root: "border-input bg-card" },
+			secondary: { root: "border-transparent bg-secondary" },
+		},
+		size: {
+			sm: {
+				root: "px-2.5",
+				row: "gap-1.5",
+				field: "text-input-sm leading-tight",
+				decoratorIcon: "size-icon-sm",
+				decoratorText: "text-input-sm",
+			},
+			md: {
+				root: "px-3",
+				row: "gap-2",
+				field: "text-input-md leading-tight",
+				decoratorIcon: "size-icon-md",
+				decoratorText: "text-input-md",
+			},
+			lg: {
+				root: "px-3.5",
+				row: "gap-2.5",
+				field: "text-input-lg leading-tight",
+				decoratorIcon: "size-icon-lg",
+				decoratorText: "text-input-lg",
+			},
+		},
+		// The empty `false` branches are load-bearing typing, not placeholders.
+		// `tv` derives the prop type from the declared keys, so a map with only
+		// `true` types the prop as `true` rather than `boolean` and rejects
+		// `inputVariants({ isFocused })`. See button.variants.ts for the same note.
+		isFocused: { true: { root: "border-ring" }, false: {} },
+		isInvalid: { true: { root: "border-destructive", decoratorText: "text-destructive" }, false: {} },
+		isDisabled: { true: { root: "opacity-50" }, false: {} },
+		isMultiline: { true: {}, false: {} },
+		// A grouped field shares its row, so it stretches — and it clears React
+		// Native's own padding, which on Android would otherwise inset the value
+		// from a gutter the row has already applied.
+		isGrouped: { true: { field: "flex-1 p-0" }, false: {} },
+		/** Which way an enclosing `Button.Group` runs, when there is one. */
+		orientation: { horizontal: {}, vertical: {} },
+		// A field standing on its own is `none` and keeps the corner off the
+		// generic ramp. Every other value means it is joined, and a joined
+		// control takes the group's corner rather than its own — see the note on
+		// the corner compounds below.
+		groupPosition: { none: {}, first: {}, middle: { root: "rounded-none" }, last: {}, only: {} },
+		isSeamed: { true: {}, false: {} },
+	},
+	compoundVariants: [
+		// The height and the vertical rhythm are declared together rather than
+		// fighting each other in the merge, the way a button's square footprint
+		// and its horizontal padding are.
+		//
+		// `py-0` on a single-line field is load-bearing on Android: React
+		// Native's `TextInput` inherits the platform's own vertical padding,
+		// which would push the value off centre inside a fixed height.
+		{ isMultiline: false, size: "sm", class: { root: "h-input-sm py-0" } },
+		{ isMultiline: false, size: "md", class: { root: "h-input-md py-0" } },
+		{ isMultiline: false, size: "lg", class: { root: "h-input-lg py-0" } },
+		// A multiline field grows with its text, so the height becomes a floor.
+		// The row aligns to the top with it: centred decorators would drift down
+		// the side of a paragraph instead of sitting on its first line.
+		{ isMultiline: true, size: "sm", class: { root: "min-h-input-sm py-2", row: "items-start" } },
+		{ isMultiline: true, size: "md", class: { root: "min-h-input-md py-2.5", row: "items-start" } },
+		{ isMultiline: true, size: "lg", class: { root: "min-h-input-lg py-3", row: "items-start" } },
+		// Focus is transient and invalid is reported, so invalid outranks it. A
+		// field that went grey the moment it was tapped would drop the only
+		// signal it has that its value is wrong, exactly while it is being fixed.
+		{ isFocused: true, isInvalid: true, class: { root: "border-destructive" } },
+		// The corner a lone field draws: the generic ramp, deliberately not the
+		// button's, because a field and the button beside it are meant to be
+		// retunable apart. `sm` steps down a notch; the other two share `lg`.
+		{ groupPosition: "none", size: "sm", class: { root: "rounded-md" } },
+		{ groupPosition: "none", size: "md", class: { root: "rounded-lg" } },
+		{ groupPosition: "none", size: "lg", class: { root: "rounded-lg" } },
+		// Joined, it takes the *group's* corner instead. A group owns the shape
+		// of its run, so a field capping one end of it has to draw the same arc
+		// the button capping the other end does — two ramps meeting in one row
+		// is the mismatch this replaces. `button.variants.test.ts` asserts these
+		// strings match the button's cell for cell.
+		{ groupPosition: "only", size: "sm", class: { root: "rounded-button-sm" } },
+		{ groupPosition: "only", size: "md", class: { root: "rounded-button-md" } },
+		{ groupPosition: "only", size: "lg", class: { root: "rounded-button-lg" } },
+		{
+			groupPosition: "first",
+			orientation: "horizontal",
+			size: "sm",
+			class: { root: "rounded-s-button-sm rounded-e-none" },
+		},
+		{
+			groupPosition: "first",
+			orientation: "horizontal",
+			size: "md",
+			class: { root: "rounded-s-button-md rounded-e-none" },
+		},
+		{
+			groupPosition: "first",
+			orientation: "horizontal",
+			size: "lg",
+			class: { root: "rounded-s-button-lg rounded-e-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "horizontal",
+			size: "sm",
+			class: { root: "rounded-e-button-sm rounded-s-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "horizontal",
+			size: "md",
+			class: { root: "rounded-e-button-md rounded-s-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "horizontal",
+			size: "lg",
+			class: { root: "rounded-e-button-lg rounded-s-none" },
+		},
+		{
+			groupPosition: "first",
+			orientation: "vertical",
+			size: "sm",
+			class: { root: "rounded-t-button-sm rounded-b-none" },
+		},
+		{
+			groupPosition: "first",
+			orientation: "vertical",
+			size: "md",
+			class: { root: "rounded-t-button-md rounded-b-none" },
+		},
+		{
+			groupPosition: "first",
+			orientation: "vertical",
+			size: "lg",
+			class: { root: "rounded-t-button-lg rounded-b-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "vertical",
+			size: "sm",
+			class: { root: "rounded-b-button-sm rounded-t-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "vertical",
+			size: "md",
+			class: { root: "rounded-b-button-md rounded-t-none" },
+		},
+		{
+			groupPosition: "last",
+			orientation: "vertical",
+			size: "lg",
+			class: { root: "rounded-b-button-lg rounded-t-none" },
+		},
+		{ isSeamed: true, orientation: "horizontal", class: { root: "-ms-px" } },
+		{ isSeamed: true, orientation: "vertical", class: { root: "-mt-px" } },
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "md",
+		isFocused: false,
+		isInvalid: false,
+		isDisabled: false,
+		isMultiline: false,
+		isGrouped: false,
+		orientation: "horizontal",
+		groupPosition: "none",
+		isSeamed: false,
+	},
+});
+
+/** The axes that decide how a field's box is drawn, wherever that box lands. */
+export type InputBoxState = {
+	variant?: InputVariant;
+	size?: InputSize;
+	isDisabled?: boolean;
+	isFocused?: boolean;
+	isInvalid?: boolean;
+	isMultiline?: boolean;
+	/** Where the field sits in an enclosing `Button.Group`, if it is in one. */
+	groupPosition?: ButtonGroupSlotPosition;
+	/** Which way that group runs. Read only when `groupPosition` is not `none`. */
+	orientation?: ButtonGroupOrientation;
+	/** Overlap the member before it, so the shared edge is drawn once. */
+	isSeamed?: boolean;
+};
+
+/**
+ * The class the `TextInput` itself wears.
+ *
+ * Standalone, the field *is* the box, so it takes the chrome and the text
+ * treatment together. Inside an `Input.Group` the box belongs to the row and
+ * the field takes the text treatment alone — otherwise the two would draw two
+ * borders, one inside the other.
+ *
+ * This is the single decision that keeps a grouped field indistinguishable from
+ * a lone one: both read the same `root` slot, so there is no second class
+ * string that could drift from the first.
+ *
+ * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveInputFieldClass({
+	className,
+	isGrouped = false,
+	...state
+}: InputBoxState & { className?: string; isGrouped?: boolean }): string {
+	const slots = inputVariants({ ...state, isGrouped });
+	return isGrouped ? slots.field({ className }) : cn(slots.root(), slots.field({ className }));
+}
+
+/**
+ * The class `Input.Group`'s row wears: the same box a lone field would draw,
+ * laid out as a row so the decorators and the field can share it.
+ *
+ * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveInputGroupClass({ className, ...state }: InputBoxState & { className?: string }): string {
+	const slots = inputVariants({ ...state, isGrouped: true });
+	return cn(slots.root(), slots.row({ className }));
+}
+
+/**
+ * The `accent-*` class uniwind resolves the placeholder colour from.
+ *
+ * Pure, so it is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolvePlaceholderAccentClass(className?: string): string {
+	return cn(INPUT_PLACEHOLDER_ACCENT_CLASS, className);
+}
+
+/**
+ * The `accent-*` class uniwind resolves the caret and selection colour from.
+ *
+ * An invalid field tints them destructive along with its border, so the state is
+ * still legible while the value is being corrected — the moment the border is
+ * the only thing carrying it. A caller's class still wins.
+ *
+ * Pure, so it is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveSelectionAccentClass({
+	className,
+	isInvalid = false,
+}: {
+	className?: string;
+	isInvalid?: boolean;
+}): string {
+	return cn(isInvalid ? INPUT_INVALID_SELECTION_ACCENT_CLASS : INPUT_SELECTION_ACCENT_CLASS, className);
+}
+
+export type InputVariantProps = VariantProps<typeof inputVariants>;

package/src/components/list-group/AGENTS.md

@@ -0,0 +1,67 @@
+# ListGroup
+
+A surface grouping related rows. Compound root plus `ListGroup.Item` and its
+five slots: `ItemPrefix`, `ItemContent`, `ItemTitle`, `ItemDescription`,
+`ItemSuffix`.
+
+`import { ListGroup } from "@delacour/react-native-ui/list-group";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/list-group` |
+| `list-group.tsx` | Root + the `Object.assign` compound surface |
+| `list-group-item.tsx` | `ListGroup.Item`, and the bare-text wrap it owns |
+| `list-group-item-prefix.tsx` | `ListGroup.ItemPrefix` |
+| `list-group-item-content.tsx` | `ListGroup.ItemContent` |
+| `list-group-item-title.tsx` | `ListGroup.ItemTitle` |
+| `list-group-item-description.tsx` | `ListGroup.ItemDescription` |
+| `list-group-item-suffix.tsx` | `ListGroup.ItemSuffix` |
+| `list-group.context.tsx` | `ListGroupProvider`, `useListGroup()`, `useListGroupContext()`, `useListGroupPart()` |
+| `list-group.types.ts` | Prop types shared by two or more parts |
+| `list-group.variants.ts` | Pure `tv()` slots, no RN imports |
+| `list-group.variants.test.ts` | |
+
+## Design
+
+- **Variants**: `default`, `secondary`, `tertiary`, `transparent`.
+  **Sizes**: `sm`, `md`, `lg`. Size is not decoration — it drives the row
+  metrics, the title and description type scale, both icon sizes *and* the
+  divider inset, which is why those five numbers live in one axis rather than
+  five magic values.
+- **The corner is `rounded-md`, the 0.8 step of the shared ramp.** shadcn puts a
+  grouped surface a step or two below a card, so a group reads as a control
+  surface rather than as one. Size does not move it, and neither does a button's
+  own corner — `--radius-button-*` is a capsule at half its height and outside
+  this ramp. See the corner-scale note in
+  [the package AGENTS.md](../../../AGENTS.md).
+- **Dividers are inserted, not written out.** The root walks its children and
+  puts a [`Separator`](../separator/AGENTS.md) between adjacent ones, inset to
+  line up with the rows' padding. A `Separator` placed by hand suppresses the
+  automatic one on either side of it, so a caller can make one gap full-bleed
+  without turning the feature off; `isDivided={false}` turns it off entirely.
+  `Children.toArray` drops the nulls a conditional child leaves behind, so a row
+  rendered only some of the time does not strand a divider.
+- **The root clips.** `overflow-hidden` is load-bearing: a pressed row fades to
+  the edge of its own box, and the first and last rows would square off the
+  group's corners without it.
+- **A row is a `Pressable`.** `ListGroupItemProps` extends `PressableProps`, so
+  `feedback`, `haptic`, `pressedScale` and the rest are inherited rather than
+  restated — the row owns no vocabulary of its own. Only the default differs:
+  `feedback` defaults to `fade`, because a full-bleed row that scales reads as
+  the whole card flexing rather than as one row responding. A prop is only
+  redeclared where it genuinely changes, as [`Button`](../button/AGENTS.md) does
+  with its narrower union; redeclaring one unchanged just to hang a doc comment
+  on it puts a second definition in the tree that can drift.
+- **Icons are composed, never passed as props.** `ItemPrefix` wraps its subtree
+  in an `IconDefaultsProvider` carrying the `prefixIcon` slot — a step on the
+  shared icon scale, like every other glyph in the library — and `foreground`,
+  so a bare `<Icon icon={IconUser} />` needs nothing said at the call site.
+  `ItemSuffix` draws a chevron when it has no children of its own; `iconProps`
+  tunes that glyph and is ignored once it does.
+- **String children** are wrapped in an `ItemContent` around an `ItemTitle`
+  automatically, consecutive strings collapsing into one — the same rule, and
+  the same reason, as [`Button`](../button/AGENTS.md).
+- **Title colour goes on the title.** The `item` slot carries no `text-*`; a row
+  is a `View` and cannot cascade colour to a `Text`. The tests assert this.

package/src/components/list-group/index.ts

@@ -0,0 +1,20 @@
+export { ListGroup, type ListGroupProps } from "./list-group";
+export {
+	type ListGroupContextValue,
+	ListGroupProvider,
+	useListGroup,
+	useListGroupContext,
+} from "./list-group.context";
+export type { ListGroupSlotProps, ListGroupTextProps } from "./list-group.types";
+export {
+	LIST_GROUP_FOREGROUND_TOKEN,
+	LIST_GROUP_SIZES,
+	LIST_GROUP_SUFFIX_ICON_TOKEN,
+	LIST_GROUP_VARIANTS,
+	type ListGroupSize,
+	type ListGroupVariant,
+	type ListGroupVariantProps,
+	listGroupVariants,
+} from "./list-group.variants";
+export type { ListGroupItemProps } from "./list-group-item";
+export type { ListGroupIconProps, ListGroupItemSuffixProps } from "./list-group-item-suffix";

package/src/components/list-group/list-group-item-content.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import { View } from "react-native";
+import type { ListGroupSlotProps } from "./list-group.types";
+import { listGroupVariants } from "./list-group.variants";
+
+/** The text column of a row, taking whatever width the prefix and suffix leave. */
+export function ListGroupItemContent({ className, ...props }: ListGroupSlotProps): ReactElement {
+	return <View className={listGroupVariants().content({ className })} {...props} />;
+}
+ListGroupItemContent.displayName = "DelacourUI.ListGroup.ItemContent";

package/src/components/list-group/list-group-item-description.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import { Text } from "../text";
+import { useListGroupPart } from "./list-group.context";
+import type { ListGroupTextProps } from "./list-group.types";
+import { listGroupVariants } from "./list-group.variants";
+
+/** The row's secondary line, a step down in scale and on the muted token. */
+export function ListGroupItemDescription({ className, ...props }: ListGroupTextProps): ReactElement {
+	const { size } = useListGroupPart("ListGroup.ItemDescription");
+	return <Text className={listGroupVariants({ size }).description({ className })} {...props} />;
+}
+ListGroupItemDescription.displayName = "DelacourUI.ListGroup.ItemDescription";

package/src/components/list-group/list-group-item-prefix.tsx

@@ -0,0 +1,30 @@
+import { type ReactElement, useMemo } from "react";
+import { View } from "react-native";
+import { IconDefaultsProvider } from "../icon";
+import { useListGroupPart } from "./list-group.context";
+import type { ListGroupSlotProps } from "./list-group.types";
+import { LIST_GROUP_FOREGROUND_TOKEN, listGroupVariants } from "./list-group.variants";
+
+/**
+ * The leading slot of a row.
+ *
+ * Its subtree inherits the list group's icon size and the foreground token, so a
+ * bare `<Icon icon={IconWifi} />` comes out right with nothing said at the call
+ * site — the same cascade a `Button` gives its icons.
+ */
+export function ListGroupItemPrefix({ className, children, ...props }: ListGroupSlotProps): ReactElement {
+	const { size } = useListGroupPart("ListGroup.ItemPrefix");
+	const slots = listGroupVariants({ size });
+	const iconClassName = slots.prefixIcon();
+	const iconDefaults = useMemo(
+		() => ({ className: iconClassName, color: LIST_GROUP_FOREGROUND_TOKEN }),
+		[iconClassName]
+	);
+
+	return (
+		<View className={slots.prefix({ className })} {...props}>
+			<IconDefaultsProvider value={iconDefaults}>{children}</IconDefaultsProvider>
+		</View>
+	);
+}
+ListGroupItemPrefix.displayName = "DelacourUI.ListGroup.ItemPrefix";

package/src/components/list-group/list-group-item-suffix.tsx

@@ -0,0 +1,55 @@
+import { Children, type ReactElement } from "react";
+import { View } from "react-native";
+import { IconChevronRight } from "../../icons/central";
+import { cn } from "../../lib/cn";
+import { Icon, type IconSize } from "../icon";
+import { useListGroupPart } from "./list-group.context";
+import type { ListGroupSlotProps } from "./list-group.types";
+import { LIST_GROUP_SUFFIX_ICON_TOKEN, listGroupVariants } from "./list-group.variants";
+
+export type ListGroupIconProps = {
+	/** A named size, or an edge length in points. Beats `className`. */
+	size?: IconSize | number;
+	/** A theme colour token or a literal. Defaults to `muted-foreground`. */
+	color?: string;
+	/** A `size-*` utility, beating the group's own suffix size. */
+	className?: string;
+};
+
+export type ListGroupItemSuffixProps = ListGroupSlotProps & {
+	/** Tunes the default chevron. Ignored once the suffix has children of its own. */
+	iconProps?: ListGroupIconProps;
+};
+
+/**
+ * The trailing slot of a row, showing a chevron unless given content.
+ *
+ * The chevron is a hint that the row leads somewhere, so it sits on the muted
+ * token and a step below the leading icon rather than competing with either.
+ */
+export function ListGroupItemSuffix({
+	className,
+	iconProps,
+	children,
+	...props
+}: ListGroupItemSuffixProps): ReactElement {
+	const { size } = useListGroupPart("ListGroup.ItemSuffix");
+	const slots = listGroupVariants({ size });
+	const hasContent = Children.toArray(children).length > 0;
+
+	return (
+		<View className={slots.suffix({ className })} {...props}>
+			{hasContent ? (
+				children
+			) : (
+				<Icon
+					className={cn(slots.suffixIcon(), iconProps?.className)}
+					color={iconProps?.color ?? LIST_GROUP_SUFFIX_ICON_TOKEN}
+					icon={IconChevronRight}
+					size={iconProps?.size}
+				/>
+			)}
+		</View>
+	);
+}
+ListGroupItemSuffix.displayName = "DelacourUI.ListGroup.ItemSuffix";

package/src/components/list-group/list-group-item-title.tsx

@@ -0,0 +1,17 @@
+import type { ReactElement } from "react";
+import { Text } from "../text";
+import { useListGroupPart } from "./list-group.context";
+import type { ListGroupTextProps } from "./list-group.types";
+import { listGroupVariants } from "./list-group.variants";
+
+/**
+ * The row's primary line.
+ *
+ * Carries its own colour and type scale, read from the list group's context: a
+ * React Native `View` does not cascade colour to a `Text` descendant.
+ */
+export function ListGroupItemTitle({ className, ...props }: ListGroupTextProps): ReactElement {
+	const { size } = useListGroupPart("ListGroup.ItemTitle");
+	return <Text className={listGroupVariants({ size }).title({ className })} {...props} />;
+}
+ListGroupItemTitle.displayName = "DelacourUI.ListGroup.ItemTitle";

package/src/components/list-group/list-group-item.tsx

@@ -0,0 +1,87 @@
+import { Children, type ReactElement, type ReactNode, useMemo } from "react";
+import { Pressable, type PressableProps } from "../pressable";
+import { useListGroupPart } from "./list-group.context";
+import { listGroupVariants } from "./list-group.variants";
+import { ListGroupItemContent } from "./list-group-item-content";
+import { ListGroupItemTitle } from "./list-group-item-title";
+
+export type ListGroupItemProps = Omit<PressableProps, "children" | "disabled"> & {
+	isDisabled?: boolean;
+	children?: ReactNode;
+};
+
+/**
+ * One row of a list group.
+ *
+ * Plain string or number children are wrapped in a title inside a content
+ * column; pass the compound parts when a row needs a prefix, a description or a
+ * suffix. React Native cannot render a string outside a `<Text>`, so the wrap is
+ * not a convenience — without it `<ListGroup.Item>Wi-Fi</ListGroup.Item>` would
+ * crash.
+ *
+ * A row is a `Pressable`, so `feedback`, `haptic` and the rest come from there
+ * rather than being restated here. Only the default differs: `fade`, because a
+ * full-bleed row that scales reads as the whole card flexing rather than as one
+ * row responding.
+ */
+export function ListGroupItem({
+	feedback = "fade",
+	isDisabled = false,
+	className,
+	children,
+	...props
+}: ListGroupItemProps): ReactElement {
+	const { size } = useListGroupPart("ListGroup.Item");
+	const content = useMemo(() => wrapTextChildren(children), [children]);
+
+	return (
+		<Pressable
+			className={listGroupVariants({ isDisabled, size }).item({ className })}
+			disabled={isDisabled}
+			feedback={feedback}
+			{...props}
+		>
+			{content}
+		</Pressable>
+	);
+}
+ListGroupItem.displayName = "DelacourUI.ListGroup.Item";
+
+/**
+ * Wraps bare text children in a title inside a content column.
+ *
+ * Consecutive strings and numbers are collected into a single title rather than
+ * one each — `Row {index}` is one piece of text, and wrapping the parts
+ * separately would space them apart by the row's gap.
+ *
+ * Lives here rather than with the root: it is the row that wraps its own text,
+ * and importing it from `./list-group` would close a cycle back through the
+ * root. See AGENTS.md rule 3.
+ */
+function wrapTextChildren(children: ReactNode): ReactNode {
+	const items = Children.toArray(children);
+	const output: ReactNode[] = [];
+	let run: (string | number)[] = [];
+
+	const flushRun = () => {
+		if (run.length === 0) return;
+		output.push(
+			<ListGroupItemContent key={`content-${output.length}`}>
+				<ListGroupItemTitle>{run.join("")}</ListGroupItemTitle>
+			</ListGroupItemContent>
+		);
+		run = [];
+	};
+
+	for (const child of items) {
+		if (typeof child === "string" || typeof child === "number") {
+			run.push(child);
+			continue;
+		}
+		flushRun();
+		output.push(child);
+	}
+	flushRun();
+
+	return output;
+}