@lt-three/love3 0.0.0 → 0.1.1

package/dist/native/base/form.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+//#region src/native/base/form.d.ts
+/**
+ * The set of chrome ids and the errors. Use it inside `FormItem`. It does not crash outside a field (controlled mode) either.
+ *
+ * **The errors to display are decided in one place here** (the field's errors + the `errors` of `FormItem`). The `FormLabel` color, the `FormMessage` text and
+ * the `FormControl` `aria-invalid` / `aria-describedby` all read from it, so mismatches such as a message being shown without `aria-invalid` cannot occur.
+ */
+export declare function useFormField(): {
+  id: string;
+  formItemId: string;
+  formLabelId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  errors: readonly unknown[];
+};
+export declare function FormItem({ children, className, errors }: {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Errors **added to** the field's (TanStack Form) errors. Use it outside a field, or inside a field when you want to show an error
+   * owned by the input component itself (such as "not readable as a number" on a numeric field). It affects the input's `aria-invalid` and `aria-describedby`,
+   * the label color and the `FormMessage` display alike. Passing an empty array does not hide the field's errors.
+   */
+  errors?: readonly unknown[];
+}): import("react").JSX.Element;
+export declare function FormLabel({ children, required, helpText, className }: {
+  children: ReactNode;
+  required?: boolean;
+  helpText?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** The props `FormControl` passes to the input component (the same shape as the component's `ControlA11yProps`). */
+export type FormControlProps = {
+  id: string;
+  "aria-labelledby": string | undefined;
+  "aria-describedby": string | undefined;
+  "aria-invalid": boolean;
+};
+/**
+ * Passes `id`, `aria-labelledby`, `aria-describedby` and `aria-invalid` to the input component. The child is received as a function.
+ *
+ * ```tsx
+ * <FormControl labelled={Boolean(label)} described={Boolean(description)}>
+ *   {control => <TextField {...control} value={value} onChangeText={setValue} />}
+ * </FormControl>
+ * ```
+ *
+ * - `labelled`: when a `FormLabel` is placed. Makes the label text the input's name (`aria-labelledby`). When none is placed,
+ *   it is not set so it never points to a nonexistent id. Inputs that carry their own label on the right (checkbox, radio) do not set it, because their own text is the name
+ * - `described`: when a `FormDescription` is placed. Adds the description to `aria-describedby`. When there is an error, the error text is added too
+ * - `id`: defaults to `formItemId` (when a field has one input). **When a field has several inputs** (radio options),
+ *   pass one per option so the same id does not collide
+ */
+export declare function FormControl({ children, id, labelled, described }: {
+  children: (control: FormControlProps) => ReactNode;
+  id?: string;
+  labelled?: boolean;
+  described?: boolean;
+}): ReactNode;
+export declare function FormDescription({ children, className }: {
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * The error text. The only errors shown are the single set from `useFormField` (add more via the `errors` of `FormItem`).
+ * It does not have the web `FormMessage`'s "errors shown only in this message" (`errors`), because changing only the text would disagree with `aria-invalid`.
+ */
+export declare function FormMessage({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/native/base/form.js

@@ -0,0 +1,113 @@
+import { useOptionalFieldContext } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "./text.js";
+import { createContext, useContext, useId } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/base/form.tsx
+const FormItemContext = createContext({ id: "" });
+/**
+* The set of chrome ids and the errors. Use it inside `FormItem`. It does not crash outside a field (controlled mode) either.
+*
+* **The errors to display are decided in one place here** (the field's errors + the `errors` of `FormItem`). The `FormLabel` color, the `FormMessage` text and
+* the `FormControl` `aria-invalid` / `aria-describedby` all read from it, so mismatches such as a message being shown without `aria-invalid` cannot occur.
+*/
+function useFormField() {
+	const itemContext = useContext(FormItemContext);
+	const errors = [...useOptionalFieldContext()?.state.meta.errors ?? [], ...itemContext.extraErrors ?? []];
+	const { id } = itemContext;
+	return {
+		id,
+		formItemId: `${id}-form-item`,
+		formLabelId: `${id}-form-item-label`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		errors
+	};
+}
+function FormItem({ children, className, errors }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: {
+			id,
+			extraErrors: errors
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			className: cn("gap-2", className),
+			children
+		})
+	});
+}
+function FormLabel({ children, required, helpText, className }) {
+	const { errors, formLabelId } = useFormField();
+	return /* @__PURE__ */ jsxs(View, {
+		className: "flex-row items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				id: formLabelId,
+				className: cn("text-xs font-semibold opacity-80", errors.length > 0 && "text-destructive opacity-100", className),
+				children
+			}),
+			required ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-destructive text-sm",
+				children: "*"
+			}) : null,
+			helpText ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-xs font-normal",
+				children: helpText
+			}) : null
+		]
+	});
+}
+/**
+* Passes `id`, `aria-labelledby`, `aria-describedby` and `aria-invalid` to the input component. The child is received as a function.
+*
+* ```tsx
+* <FormControl labelled={Boolean(label)} described={Boolean(description)}>
+*   {control => <TextField {...control} value={value} onChangeText={setValue} />}
+* </FormControl>
+* ```
+*
+* - `labelled`: when a `FormLabel` is placed. Makes the label text the input's name (`aria-labelledby`). When none is placed,
+*   it is not set so it never points to a nonexistent id. Inputs that carry their own label on the right (checkbox, radio) do not set it, because their own text is the name
+* - `described`: when a `FormDescription` is placed. Adds the description to `aria-describedby`. When there is an error, the error text is added too
+* - `id`: defaults to `formItemId` (when a field has one input). **When a field has several inputs** (radio options),
+*   pass one per option so the same id does not collide
+*/
+function FormControl({ children, id, labelled = false, described = false }) {
+	const { errors, formItemId, formLabelId, formDescriptionId, formMessageId } = useFormField();
+	const invalid = errors.length > 0;
+	const describedBy = [described ? formDescriptionId : void 0, invalid ? formMessageId : void 0].filter(Boolean).join(" ");
+	return children({
+		id: id ?? formItemId,
+		"aria-labelledby": labelled ? formLabelId : void 0,
+		"aria-describedby": describedBy === "" ? void 0 : describedBy,
+		"aria-invalid": invalid
+	});
+}
+function FormDescription({ children, className }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(Text$1, {
+		id: formDescriptionId,
+		className: cn("text-muted-foreground text-sm", className),
+		children
+	});
+}
+/**
+* The error text. The only errors shown are the single set from `useFormField` (add more via the `errors` of `FormItem`).
+* It does not have the web `FormMessage`'s "errors shown only in this message" (`errors`), because changing only the text would disagree with `aria-invalid`.
+*/
+function FormMessage({ className }) {
+	const { errors: list, formMessageId } = useFormField();
+	if (list.length === 0) return null;
+	return /* @__PURE__ */ jsx(Text$1, {
+		id: formMessageId,
+		role: "alert",
+		className: cn("text-destructive text-sm", className),
+		children: list.map((error) => String(error)).join("\n")
+	});
+}
+
+//#endregion
+export { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField };

package/dist/native/base/glass-card.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+//#region src/native/base/glass-card.d.ts
+type GlassCardProps = {
+  children: ReactNode;
+  style?: ViewStyle;
+};
+/**
+ * A Liquid Glass card surface. On iOS 26 and later it uses `GlassView` (`UIGlassEffect`)
+ * for a glass look that blurs what is behind it; on unsupported environments (below iOS 26, Android, web) it falls back to a plain View with a border.
+ * The fallback border uses the token's line color (`--line`).
+ */
+declare function GlassCard({ children, style }: GlassCardProps): import("react").JSX.Element;
+//#endregion
+export { GlassCard, type GlassCardProps };

package/dist/native/base/glass-card.js

@@ -0,0 +1,38 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
+
+//#region src/native/base/glass-card.tsx
+const BASE = {
+	borderRadius: 10,
+	padding: 16,
+	overflow: "hidden"
+};
+/**
+* A Liquid Glass card surface. On iOS 26 and later it uses `GlassView` (`UIGlassEffect`)
+* for a glass look that blurs what is behind it; on unsupported environments (below iOS 26, Android, web) it falls back to a plain View with a border.
+* The fallback border uses the token's line color (`--line`).
+*/
+function GlassCard({ children, style }) {
+	const line = useTokenColor("--line");
+	if (isLiquidGlassAvailable()) return /* @__PURE__ */ jsx(GlassView, {
+		glassEffectStyle: "regular",
+		style: [BASE, style],
+		children
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style: [
+			BASE,
+			{
+				borderWidth: 1,
+				borderColor: line
+			},
+			style
+		],
+		children
+	});
+}
+
+//#endregion
+export { GlassCard };

package/dist/native/base/input.d.ts

@@ -0,0 +1,29 @@
+import { KeyboardTypeOptions } from "react-native";
+//#region src/native/base/input.d.ts
+type InputProps = {
+  placeholder?: string;
+  /** The value to display. Pass it when syncing with external state (internally it is driven uncontrolled). */
+  value?: string;
+  onChangeText?: (text: string) => void;
+  secureTextEntry?: boolean;
+  editable?: boolean;
+  autoFocus?: boolean;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  keyboardType?: KeyboardTypeOptions;
+  returnKeyType?: "done" | "go" | "next" | "search" | "send";
+  onSubmitEditing?: (text: string) => void;
+};
+/**
+ * The native text input (the OS control layer). Renders SwiftUI's `TextField` / `SecureField` on iOS
+ * and Jetpack Compose's `TextField` on Android (via `@expo/ui` universal).
+ *
+ * The **OS-native base layer** counterpart of `atom/text-field` (an RN `TextInput`, an input frame painted with tokens).
+ * It **cannot be painted with tokens**, so for inputs that should look the same as the web use `atom/text-field` (or `form/text-input` in a form).
+ *
+ * The universal `value` is an `ObservableState` type, so to handle a plain string it is driven by
+ * `defaultValue` (uncontrolled) + `onChangeText`. External state is
+ * synced through `onChangeText`.
+ */
+declare function Input({ value, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/native/base/input.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Host, TextInput } from "@expo/ui";
+
+//#region src/native/base/input.tsx
+/**
+* The native text input (the OS control layer). Renders SwiftUI's `TextField` / `SecureField` on iOS
+* and Jetpack Compose's `TextField` on Android (via `@expo/ui` universal).
+*
+* The **OS-native base layer** counterpart of `atom/text-field` (an RN `TextInput`, an input frame painted with tokens).
+* It **cannot be painted with tokens**, so for inputs that should look the same as the web use `atom/text-field` (or `form/text-input` in a form).
+*
+* The universal `value` is an `ObservableState` type, so to handle a plain string it is driven by
+* `defaultValue` (uncontrolled) + `onChangeText`. External state is
+* synced through `onChangeText`.
+*/
+function Input({ value, ...props }) {
+	return /* @__PURE__ */ jsx(Host, {
+		style: { minHeight: 44 },
+		children: /* @__PURE__ */ jsx(TextInput, {
+			defaultValue: value,
+			...props
+		})
+	});
+}
+
+//#endregion
+export { Input };

package/dist/native/base/sheet.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+//#region src/native/base/sheet.d.ts
+export type SheetShellProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Whether tapping the backdrop closes it (default true). */
+  dismissOnBackdropPress?: boolean;
+  /** The maximum height as a ratio of the screen height (default 0.85). */
+  maxHeightRatio?: number;
+  /**
+   * Called **exactly once** after it has fully closed and the `Modal` has been dismissed (not called if it was never opened, nor on every re-render).
+   * **Open the next sheet from here.**
+   * If another sheet is opened right after setting `open` to false, two `Modal`s coexist for the duration of the
+   * closing animation, and iOS does not present the later one (it looks like nothing happens).
+   *
+   * **A confirm dialog (`once/confirm`) is also a `Modal`.** When showing a confirmation from inside a sheet,
+   * use this for the same reason.
+   */
+  onClosed?: () => void;
+  /**
+   * The `id` of the heading that names the dialog (the same value as `SheetHeader`'s `titleId`). Practically required when there is no `aria-label`
+   * (a dialog without a name is conveyed to assistive technology only as "dialog").
+   */
+  "aria-labelledby"?: string;
+  /** The dialog's name when the heading is not a string or no heading is shown. */
+  "aria-label"?: string;
+  /** The `id` of the supplementary text (the same value as `SheetHeader`'s `descriptionId`). */
+  "aria-describedby"?: string;
+  children: ReactNode;
+};
+/**
+ * Do not use `Modal`'s `animationType="slide"`. It slides up **together with the scrim**,
+ * so the dark overlay appears to grow from the bottom and looks cheap. Here the scrim's fade and the panel's
+ * slide are driven by separate curves.
+ *
+ * The dialog role (`role="dialog"`, `aria-modal`), focus trapping and Esc (`onRequestClose`) are provided by `Modal`
+ * (react-native-web's `Modal` emits the role and the trap. It has no name of its own, so pass `aria-label(ledby)`).
+ */
+export declare function SheetShell({ open, onOpenChange, dismissOnBackdropPress, maxHeightRatio, onClosed, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children }: SheetShellProps): import("react").JSX.Element | null;
+export type SheetHeaderProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Screen reader name of the close button (the default is the Japanese "close" label). */
+  closeLabel?: string;
+  onClose: () => void;
+  /** The `id` of the heading. Pass the same value to `SheetShell`'s `aria-labelledby` and the heading becomes the dialog's name. */
+  titleId?: string;
+  /** The `id` of the supplementary text. Pass the same value to `SheetShell`'s `aria-describedby`. */
+  descriptionId?: string;
+};
+/** The grab cue (grabber), the heading and the close button. */
+export declare function SheetHeader({ title, description, closeLabel, onClose, titleId, descriptionId }: SheetHeaderProps): import("react").JSX.Element;
+export type SheetScrollProps = {
+  /** Whether to pad the content (default true). Use false for a row list that fills edge to edge. */
+  padded?: boolean;
+  /** Whether there is a footer. When there is none, the content's bottom edge absorbs the safe area. */
+  hasFooter?: boolean;
+  children: ReactNode;
+};
+/**
+ * The sheet body.
+ *
+ * `contentContainerClassName` **does not work** with react-native-css (the padding silently disappears and
+ * text gets clipped at the edge). Always write padding in `contentContainerStyle`.
+ */
+export declare function SheetScroll({ padded, hasFooter, children }: SheetScrollProps): import("react").JSX.Element;
+/** The sheet footer. Adds the safe area so it does not slip under the home indicator. */
+export declare function SheetFooter({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/native/base/sheet.js

@@ -0,0 +1,187 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { isBlankNode } from "../lib/utils.js";
+import { Text as Text$1 } from "./text.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { useEffect, useRef, useState } from "react";
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import Animated$1, { Easing as Easing$1, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+
+//#region src/native/base/sheet.tsx
+/**
+* The base for a bottom sheet. Mirrors the web base/sheet (a wrapper around Radix Dialog).
+*
+* This holds only "how the surface appears"; conventions for headings and body are decided by `layout/sheet`.
+* Things that want their own content, such as the `atom/select` picker, cannot go through `layout/`
+* (the dependency would run backwards), so, as on the web, the base lives in base and both use it.
+*/
+/** The content padding. Even when `padded` is false, the bottom safe area is always secured. */
+const GUTTER = 16;
+/**
+* Do not use `Modal`'s `animationType="slide"`. It slides up **together with the scrim**,
+* so the dark overlay appears to grow from the bottom and looks cheap. Here the scrim's fade and the panel's
+* slide are driven by separate curves.
+*
+* The dialog role (`role="dialog"`, `aria-modal`), focus trapping and Esc (`onRequestClose`) are provided by `Modal`
+* (react-native-web's `Modal` emits the role and the trap. It has no name of its own, so pass `aria-label(ledby)`).
+*/
+function SheetShell({ open, onOpenChange, dismissOnBackdropPress = true, maxHeightRatio = .85, onClosed, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children }) {
+	const { height: windowHeight } = useWindowDimensions();
+	const [mounted, setMounted] = useState(open);
+	const [panelHeight, setPanelHeight] = useState(0);
+	if (open && !mounted) setMounted(true);
+	if (!open && !mounted && panelHeight !== 0) setPanelHeight(0);
+	const progress = useSharedValue(0);
+	useEffect(() => {
+		if (open) return;
+		progress.set(withTiming(0, {
+			duration: 180,
+			easing: Easing$1.in(Easing$1.cubic)
+		}, (finished) => {
+			"worklet";
+			if (finished) scheduleOnRN(setMounted, false);
+		}));
+	}, [open, progress]);
+	useEffect(() => {
+		if (!open || panelHeight === 0) return;
+		progress.set(withSpring(1, {
+			damping: 26,
+			stiffness: 260,
+			mass: .9
+		}));
+	}, [
+		open,
+		panelHeight,
+		progress
+	]);
+	const wasMounted = useRef(false);
+	const onClosedRef = useRef(onClosed);
+	useEffect(() => {
+		onClosedRef.current = onClosed;
+	});
+	useEffect(() => {
+		if (mounted) {
+			wasMounted.current = true;
+			return;
+		}
+		if (!wasMounted.current) return;
+		wasMounted.current = false;
+		onClosedRef.current?.();
+	}, [mounted]);
+	const scrimStyle = useAnimatedStyle(() => ({ opacity: progress.get() }), [progress]);
+	const panelStyle = useAnimatedStyle(() => ({
+		opacity: panelHeight === 0 ? 0 : 1,
+		transform: [{ translateY: (1 - progress.get()) * panelHeight }]
+	}), [progress, panelHeight]);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: true,
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "none",
+		onRequestClose: () => onOpenChange(false),
+		"aria-labelledby": ariaLabelledBy,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: { flex: 1 },
+			children: [/* @__PURE__ */ jsx(Animated$1.View, {
+				style: [StyleSheet.absoluteFill, scrimStyle],
+				children: /* @__PURE__ */ jsx(Pressable, {
+					accessible: false,
+					style: StyleSheet.absoluteFill,
+					className: "bg-scrim",
+					onPress: dismissOnBackdropPress ? () => onOpenChange(false) : void 0
+				})
+			}), /* @__PURE__ */ jsx(KeyboardAvoidingView, {
+				style: {
+					flex: 1,
+					justifyContent: "flex-end"
+				},
+				pointerEvents: "box-none",
+				behavior: Platform.OS === "ios" ? "padding" : "height",
+				children: /* @__PURE__ */ jsx(Animated$1.View, {
+					style: panelStyle,
+					onLayout: (event) => setPanelHeight(event.nativeEvent.layout.height),
+					children: /* @__PURE__ */ jsx(View, {
+						className: "rounded-t-surface bg-popover shadow-lg",
+						style: { maxHeight: windowHeight * maxHeightRatio },
+						children: /* @__PURE__ */ jsx(View, {
+							className: "overflow-hidden rounded-t-surface",
+							style: { flexShrink: 1 },
+							children
+						})
+					})
+				})
+			})]
+		})
+	});
+}
+/** The grab cue (grabber), the heading and the close button. */
+function SheetHeader({ title, description, closeLabel = CLOSE_LABEL, onClose, titleId, descriptionId }) {
+	const ink = useTokenColor("--ink-500");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(View, {
+		className: "items-center pt-2 pb-1",
+		children: /* @__PURE__ */ jsx(View, { className: "h-1 w-9 bg-line" })
+	}), /* @__PURE__ */ jsxs(View, {
+		className: "flex-row items-start justify-between gap-2 border-b border-line px-4 pt-1 pb-3",
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "shrink gap-1",
+			children: [!isBlankNode(title) ? /* @__PURE__ */ jsx(Text$1, {
+				id: titleId,
+				role: "heading",
+				"aria-level": "2",
+				className: "text-base font-semibold",
+				children: title
+			}) : null, !isBlankNode(description) ? /* @__PURE__ */ jsx(Text$1, {
+				id: descriptionId,
+				className: "text-muted-foreground text-sm",
+				children: description
+			}) : null]
+		}), /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: "button",
+			accessibilityLabel: closeLabel,
+			hitSlop: 12,
+			onPress: onClose,
+			children: /* @__PURE__ */ jsx(Feather, {
+				name: "x",
+				size: 16,
+				color: ink
+			})
+		})]
+	})] });
+}
+/**
+* The sheet body.
+*
+* `contentContainerClassName` **does not work** with react-native-css (the padding silently disappears and
+* text gets clipped at the edge). Always write padding in `contentContainerStyle`.
+*/
+function SheetScroll({ padded = true, hasFooter = false, children }) {
+	const insets = useSafeAreaInsets();
+	return /* @__PURE__ */ jsx(ScrollView, {
+		style: { flexShrink: 1 },
+		contentContainerStyle: {
+			gap: padded ? GUTTER : 0,
+			paddingHorizontal: padded ? GUTTER : 0,
+			paddingTop: padded ? GUTTER : 0,
+			paddingBottom: (padded ? GUTTER : 0) + (hasFooter ? 0 : insets.bottom)
+		},
+		children
+	});
+}
+/** The sheet footer. Adds the safe area so it does not slip under the home indicator. */
+function SheetFooter({ children }) {
+	const insets = useSafeAreaInsets();
+	return /* @__PURE__ */ jsx(View, {
+		className: "flex-row justify-end gap-2 border-t border-line px-4 pt-3",
+		style: { paddingBottom: 12 + insets.bottom },
+		children
+	});
+}
+
+//#endregion
+export { SheetFooter, SheetHeader, SheetScroll, SheetShell };

package/dist/native/base/text.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+import { Text as Text$1 } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/native/base/text.d.ts
+declare const textVariants: (props?: ({
+  variant?: "blockquote" | "code" | "default" | "h1" | "h2" | "h3" | "h4" | "large" | "lead" | "muted" | "p" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextVariantProps = VariantProps<typeof textVariants>;
+declare const TextClassContext: React$1.Context<string | undefined>;
+declare function Text({ className, asChild, variant, ...props }: React$1.ComponentProps<typeof Text$1> & TextVariantProps & React$1.RefAttributes<Text$1> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { Text, TextClassContext };

package/dist/native/base/text.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import * as React$1 from "react";
+import { Platform, Text as Text$1 } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import * as Slot from "@rn-primitives/slot";
+import { cva } from "class-variance-authority";
+
+//#region src/native/base/text.tsx
+const textVariants = cva(cn("text-foreground font-sans text-base", Platform.select({ web: "select-text" })), {
+	variants: { variant: {
+		default: "",
+		h1: cn("text-center text-4xl font-extrabold tracking-tight", Platform.select({ web: "scroll-m-20 text-balance" })),
+		h2: cn("border-line border-b pb-2 text-3xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20 first:mt-0" })),
+		h3: cn("text-2xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20" })),
+		h4: cn("text-xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20" })),
+		p: "mt-3 leading-7 sm:mt-6",
+		blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",
+		code: cn("bg-muted rounded-control relative px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"),
+		lead: "text-muted-foreground text-xl",
+		large: "text-lg font-semibold",
+		small: "text-sm font-medium leading-none",
+		muted: "text-muted-foreground text-sm"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const ROLE = {
+	h1: "heading",
+	h2: "heading",
+	h3: "heading",
+	h4: "heading",
+	blockquote: Platform.select({ web: "blockquote" }),
+	code: Platform.select({ web: "code" })
+};
+const ARIA_LEVEL = {
+	h1: "1",
+	h2: "2",
+	h3: "3",
+	h4: "4"
+};
+const TextClassContext = React$1.createContext(void 0);
+function Text({ className, asChild = false, variant = "default", ...props }) {
+	const textClass = React$1.useContext(TextClassContext);
+	const Component = asChild ? Slot.Text : Text$1;
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn(textVariants({ variant }), textClass, className),
+		role: variant ? ROLE[variant] : void 0,
+		"aria-level": variant ? ARIA_LEVEL[variant] : void 0,
+		...props
+	});
+}
+
+//#endregion
+export { Text, TextClassContext };

package/dist/native/form/checkbox.d.ts

@@ -0,0 +1,13 @@
+import { BaseInputProps } from "../../shared/form.js";
+import { ReactNode } from "react";
+//#region src/native/form/checkbox.d.ts
+export type CheckboxProps = BaseInputProps<boolean> & {
+  /** Label placed to the right of the checkbox. Distinct from the field's `label` (this one becomes the checkbox's name). */
+  checkboxLabel: ReactNode;
+};
+/**
+ * Checkbox integrated with TanStack Form. Like the web `form/checkbox`,
+ * pass `value` / `onValueChange` for controlled mode (the field is not used); omit them to read from the field context.
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+//#endregion