@lt-three/love3 0.0.0 → 0.1.1

package/dist/native/form/text-input.js

@@ -0,0 +1,90 @@
+import { useFieldValue } from "../../shared/form.js";
+import { NUMBER_INVALID_LABEL } from "../lib/labels.js";
+import { TextField } from "../atom/text-field.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/text-input.tsx
+const DECIMAL = /^[+-]?(?:\d+\.?\d*|\.\d+)$/;
+/**
+* Parses the text typed into a number field.
+* - Leading and trailing whitespace is ignored, and empty input (including `" "`) means "no value" (null)
+* - Full-width digits and symbols are normalized to half-width (`１２．５` → `12.5`). `,` is accepted as the decimal point (`1,5` → 1.5; locale).
+*   Thousands separators (`1,000`) cannot be told apart (read as 1); digit grouping is assumed not to be entered
+* - Unreadable text (`abc`, `-`, `0x10`, `Infinity`, overflow) yields `ok: false`
+*/
+function parseNumber(text) {
+	const normalized = text.normalize("NFKC").replaceAll("−", "-").replace(",", ".").trim();
+	if (normalized === "") return {
+		ok: true,
+		value: null
+	};
+	if (!DECIMAL.test(normalized)) return { ok: false };
+	const parsed = Number(normalized);
+	return Number.isFinite(parsed) ? {
+		ok: true,
+		value: parsed
+	} : { ok: false };
+}
+/**
+* Text input integrated with TanStack Form. Corresponds to the web `form/text-input`.
+* The value comes from the field context, and `debounce` handling is delegated to the shared `useFieldValue`.
+* The input frame itself uses `atom/text-field` (the counterpart of web's `base/input`).
+*/
+function TextInput({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, type = "text", autoComplete, autoCapitalize, multiline, "data-testid": testID }) {
+	const [value, setValue, field] = useFieldValue({ debounce });
+	const [draft, setDraft] = useState(null);
+	const parsed = draft === null ? null : parseNumber(draft);
+	const draftValue = parsed === null ? void 0 : parsed.ok ? parsed.value : null;
+	const touched = field.state.meta.isTouched;
+	const [wasTouched, setWasTouched] = useState(touched);
+	if (touched !== wasTouched) {
+		setWasTouched(touched);
+		if (!touched && draft !== null) setDraft(null);
+	}
+	const draftActive = draft !== null && draftValue === (value ?? null);
+	if (draft !== null && !draftActive) setDraft(null);
+	const numberUnreadable = type === "number" && draftActive && parsed !== null && !parsed.ok;
+	const shown = type === "number" && draftActive ? draft : value === null || value === void 0 ? "" : String(value);
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		errors: numberUnreadable ? [NUMBER_INVALID_LABEL] : void 0,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				labelled: Boolean(label),
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(TextField, {
+					...control,
+					accessibilityLabel: typeof label === "string" ? label : void 0,
+					accessibilityHint: description,
+					value: shown,
+					onChangeText: (text) => {
+						if (type !== "number") return setValue(text);
+						setDraft(text);
+						const next = parseNumber(text);
+						setValue(next.ok ? next.value : null);
+					},
+					placeholder,
+					type,
+					disabled,
+					autoComplete,
+					autoCapitalize,
+					multiline,
+					testID,
+					className
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { TextInput };

package/dist/native/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/native/layout/accordion.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/accordion.d.ts
+export type AccordionEntry = {
+  /** Item identifier. */
+  value: string;
+  trigger: ReactNode;
+  content: ReactNode;
+};
+export type AccordionProps = {
+  items: AccordionEntry[];
+  /** `single` opens one item at a time; `multiple` allows several open at once. */
+  type?: "single" | "multiple";
+  defaultValue?: string[];
+  className?: string;
+  itemClassName?: string;
+  /** Extra classes for the open/close row (the trigger). */
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+/**
+ * A data-driven accordion, like the web `layout/accordion`: just pass `items`.
+ * Dividers are 1px hairlines only, and only the open/close chevron animates.
+ */
+export declare function Accordion({ items, type, defaultValue, className, itemClassName, triggerClassName, contentClassName }: AccordionProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/accordion.js

@@ -0,0 +1,54 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { useState } from "react";
+import { LayoutAnimation, Platform, Pressable, UIManager, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/layout/accordion.tsx
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) UIManager.setLayoutAnimationEnabledExperimental(true);
+/**
+* A data-driven accordion, like the web `layout/accordion`: just pass `items`.
+* Dividers are 1px hairlines only, and only the open/close chevron animates.
+*/
+function Accordion({ items, type = "single", defaultValue = [], className, itemClassName, triggerClassName, contentClassName }) {
+	const [open, setOpen] = useState(defaultValue);
+	const ink = useTokenColor("--ink-500");
+	const toggle = (value) => {
+		LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+		setOpen((prev) => {
+			if (prev.includes(value)) return prev.filter((v) => v !== value);
+			return type === "single" ? [value] : [...prev, value];
+		});
+	};
+	return /* @__PURE__ */ jsx(View, {
+		className,
+		children: items.map((item) => {
+			const isOpen = open.includes(item.value);
+			return /* @__PURE__ */ jsxs(View, {
+				className: cn("border-b border-line", itemClassName),
+				children: [/* @__PURE__ */ jsxs(Pressable, {
+					accessibilityRole: "button",
+					"aria-expanded": isOpen,
+					onPress: () => toggle(item.value),
+					className: cn("flex-row items-center justify-between gap-2 py-4", triggerClassName),
+					children: [typeof item.trigger === "string" ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-sm font-medium",
+						children: item.trigger
+					}) : item.trigger, /* @__PURE__ */ jsx(Feather, {
+						name: isOpen ? "chevron-up" : "chevron-down",
+						size: 16,
+						color: ink
+					})]
+				}), isOpen ? /* @__PURE__ */ jsx(View, {
+					className: cn("pb-4", contentClassName),
+					children: item.content
+				}) : null]
+			}, item.value);
+		})
+	});
+}
+
+//#endregion
+export { Accordion };

package/dist/native/layout/card.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+//#region src/native/layout/card.d.ts
+/** A text or number action (it serves as its own spoken name). */
+type TextAction = string | number;
+/**
+ * The action at the right end of the header. **When the tappable action (`actionOnPress`) is not text (an icon, for example),
+ * a spoken name (`actionLabel`) is required** (otherwise the button would have no name).
+ */
+type CardActionProps = {
+  action?: undefined;
+  actionOnPress?: undefined;
+  actionLabel?: undefined;
+} | {
+  action: ReactNode;
+  actionOnPress?: undefined;
+  actionLabel?: string;
+} | {
+  action: TextAction;
+  actionOnPress: () => void;
+  actionLabel?: string;
+} | {
+  action: Exclude<ReactNode, TextAction | null | undefined>;
+  actionOnPress: () => void;
+  actionLabel: string;
+};
+export type CardProps = CardActionProps & {
+  title?: ReactNode;
+  /**
+   * Makes the title a heading (`role="heading"` and `aria-level`). Pass it when the title should be part of the screen's heading structure.
+   * When omitted it is plain text (same meaning as web's `headingLevel`).
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+/**
+ * The same "title, description, action, body, footer" structure as the web `layout/card`.
+ * The shell (surface radius, a very faint 1px rule, raised surface) belongs to `Panel`.
+ *
+ * If you only want to lay out your own spacing and dividers inside, use `Panel`, the bare surface, directly.
+ */
+export declare function Card({ title, headingLevel, description, action, actionOnPress, actionLabel, content, footer, className, contentClassName }: CardProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/native/layout/card.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Panel } from "./panel.js";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/card.tsx
+/**
+* The same "title, description, action, body, footer" structure as the web `layout/card`.
+* The shell (surface radius, a very faint 1px rule, raised surface) belongs to `Panel`.
+*
+* If you only want to lay out your own spacing and dividers inside, use `Panel`, the bare surface, directly.
+*/
+function Card({ title, headingLevel, description, action, actionOnPress, actionLabel, content, footer, className, contentClassName }) {
+	const hasHeader = !!title || !!description || !!action;
+	const actionNode = typeof action === "string" || typeof action === "number" ? /* @__PURE__ */ jsx(Text$1, {
+		className: "text-sm",
+		children: action
+	}) : action;
+	return /* @__PURE__ */ jsxs(Panel, {
+		className,
+		children: [
+			hasHeader ? /* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-start justify-between gap-2 border-b border-line px-4 py-3",
+				children: [/* @__PURE__ */ jsxs(View, {
+					className: "shrink gap-1",
+					children: [title ? /* @__PURE__ */ jsx(Text$1, {
+						role: headingLevel ? "heading" : void 0,
+						"aria-level": headingLevel ? String(headingLevel) : void 0,
+						className: "text-base font-semibold leading-none",
+						children: title
+					}) : null, description ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-muted-foreground text-sm",
+						children: description
+					}) : null]
+				}), action ? actionOnPress ? /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: actionLabel,
+					onPress: actionOnPress,
+					hitSlop: 12,
+					children: actionNode
+				}) : actionNode : null]
+			}) : null,
+			/* @__PURE__ */ jsx(View, {
+				className: cn("grow gap-4 p-4", contentClassName),
+				children: content
+			}),
+			footer ? /* @__PURE__ */ jsx(View, {
+				className: "flex-row justify-end gap-4 border-t border-line px-4 py-3",
+				children: footer
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { Card };

package/dist/native/layout/description.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+//#region src/native/layout/description.d.ts
+export type DescriptionSection = {
+  title: string;
+  titleIcon?: ReactNode;
+  description: ReactNode;
+};
+export type DescriptionProps = {
+  sections: DescriptionSection[];
+};
+/**
+ * Stacks heading + body sections separated by 1px rules.
+ * Corresponds to the web `layout/description` (terms of service, explanation screens, etc.).
+ */
+export declare function Description({ sections }: DescriptionProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/description.js

@@ -0,0 +1,32 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Separator } from "../atom/separator.js";
+import { Fragment } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/description.tsx
+/**
+* Stacks heading + body sections separated by 1px rules.
+* Corresponds to the web `layout/description` (terms of service, explanation screens, etc.).
+*/
+function Description({ sections }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: "gap-8",
+		children: sections.map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsxs(View, {
+			className: "mb-2 flex-row items-center gap-2",
+			children: [section.titleIcon, /* @__PURE__ */ jsx(Text$1, {
+				className: "font-bold",
+				children: section.title
+			})]
+		}), /* @__PURE__ */ jsx(View, {
+			className: "gap-4",
+			children: typeof section.description === "string" ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-sm",
+				children: section.description
+			}) : section.description
+		})] }), index < sections.length - 1 ? /* @__PURE__ */ jsx(Separator, {}) : null] }, section.title))
+	});
+}
+
+//#endregion
+export { Description };

package/dist/native/layout/error.d.ts

@@ -0,0 +1,21 @@
+//#region src/native/layout/error.d.ts
+export type ErrorViewProps = {
+  /** Display text. This is a shared package, so the caller owns it (no i18n is brought in). */
+  labels: {
+    title: string;
+    description?: string;
+    retry: string;
+  };
+  onRetry: () => void;
+  /**
+   * By default it fills the screen and centers its content. When inserted as part of scrolling content,
+   * `h-full` cannot be resolved, so override the height with `className`.
+   */
+  className?: string;
+};
+/**
+ * The screen shown on error.
+ * It is also used as the content of `once/error-boundary`.
+ */
+export declare function ErrorView({ labels, onRetry, className }: ErrorViewProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/error.js

@@ -0,0 +1,44 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/layout/error.tsx
+/**
+* The screen shown on error.
+* It is also used as the content of `once/error-boundary`.
+*/
+function ErrorView({ labels, onRetry, className }) {
+	const ink = useTokenColor("--ink-1000");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("h-full w-full items-center justify-center gap-4 p-6", className),
+		children: [
+			/* @__PURE__ */ jsx(Feather, {
+				name: "alert-octagon",
+				size: 20,
+				color: ink
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				className: "text-base font-semibold",
+				children: labels.title
+			}),
+			labels.description ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-center text-sm",
+				children: labels.description
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				className: "self-center",
+				variant: "outline",
+				size: "sm",
+				onPress: onRetry,
+				children: labels.retry
+			})
+		]
+	});
+}
+
+//#endregion
+export { ErrorView };

package/dist/native/layout/information.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/information.d.ts
+export type InformationField = {
+  label: string;
+  value: ReactNode;
+  separator?: never;
+} | {
+  label?: never;
+  value?: never;
+  separator: true;
+};
+export type InformationProps = {
+  fields: InformationField[];
+  /** Shows values larger (for a detail screen header, etc.). */
+  highlighted?: boolean;
+  className?: string;
+};
+/**
+ * A definition list that lays out labels and values. Corresponds to the web `layout/information`.
+ *
+ * Web has room to split into several columns, but native lacks the width, so it
+ * **always renders a single column** (rows with the label on the left and the value on the right).
+ */
+export declare function Information({ fields, highlighted, className }: InformationProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/information.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Separator } from "../atom/separator.js";
+import { Fragment } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/information.tsx
+/**
+* A definition list that lays out labels and values. Corresponds to the web `layout/information`.
+*
+* Web has room to split into several columns, but native lacks the width, so it
+* **always renders a single column** (rows with the label on the left and the value on the right).
+*/
+function Information({ fields, highlighted, className }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("gap-3", className),
+		children: fields.map((field, index) => field.separator ? /* @__PURE__ */ jsx(Separator, {}, `separator-${index}`) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center justify-between gap-4",
+			children: [/* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground shrink-0 text-xs font-semibold",
+				children: field.label
+			}), /* @__PURE__ */ jsx(View, {
+				className: cn("min-h-7 shrink flex-row items-center justify-end gap-2"),
+				children: typeof field.value === "string" || typeof field.value === "number" ? /* @__PURE__ */ jsx(Text$1, {
+					className: cn(highlighted ? "text-lg" : "text-sm"),
+					children: field.value
+				}) : field.value
+			})]
+		}) }, field.label))
+	});
+}
+
+//#endregion
+export { Information };

package/dist/native/layout/locked.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+//#region src/native/layout/locked.d.ts
+export type LockedProps = {
+  /**
+   * The shape of what lies behind the lock. Pass a **sample that is not meant to be read**.
+   * Never pass real data (the cover is a visual treatment, not a barrier).
+   */
+  children: ReactNode;
+  /** Short text overlaid on the surface. Example: "Available with Pro". */
+  label: string;
+  /** Note stating that the content is a sample. Example: "Sample". Not shown when omitted. */
+  sampleLabel?: string;
+  /** Makes the whole surface pressable. A lock invites pressing, so pass this in most cases. */
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  /**
+   * The destination placed under the cover (an explanation and an exit button). **Keeping it inside the same surface**
+   * puts "what you can't see" and "how to unlock it" on a single card.
+   */
+  footer?: ReactNode;
+  /** Height of the sample. Defaults to 160. */
+  height?: number;
+  className?: string;
+};
+/**
+ * A locked surface. **Shows the shape of the content but makes it unreadable.**
+ *
+ * Replacing the content wholesale communicates "absence" rather than "locked", and it is unclear what is being missed.
+ * Keeping the shape and covering it shows what is there while conveying that it is out of reach.
+ *
+ * It is built as **distinct from the loading Skeleton**. A Skeleton means "it will appear if you wait",
+ * so the same look must not be used for a lock (waiting will not reveal anything).
+ *
+ * The cover is a `GlassView` (glass that blurs what is behind it) on iOS 26 and later, and a card-colored cover where that is unsupported (below iOS 26, Android, web).
+ * **The sample is a dummy, so the strength of the cover has no confidentiality requirement.** Choose it as a visual treatment.
+ */
+export declare function Locked({ children, label, sampleLabel, onPress, accessibilityLabel, footer, height, className }: LockedProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/locked.js

@@ -0,0 +1,94 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Panel } from "./panel.js";
+import { Pressable, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
+
+//#region src/native/layout/locked.tsx
+const FILL = {
+	position: "absolute",
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	gap: 8,
+	padding: 16
+};
+/**
+* A locked surface. **Shows the shape of the content but makes it unreadable.**
+*
+* Replacing the content wholesale communicates "absence" rather than "locked", and it is unclear what is being missed.
+* Keeping the shape and covering it shows what is there while conveying that it is out of reach.
+*
+* It is built as **distinct from the loading Skeleton**. A Skeleton means "it will appear if you wait",
+* so the same look must not be used for a lock (waiting will not reveal anything).
+*
+* The cover is a `GlassView` (glass that blurs what is behind it) on iOS 26 and later, and a card-colored cover where that is unsupported (below iOS 26, Android, web).
+* **The sample is a dummy, so the strength of the cover has no confidentiality requirement.** Choose it as a visual treatment.
+*/
+function Locked({ children, label, sampleLabel, onPress, accessibilityLabel, footer, height = 160, className }) {
+	const ink = useTokenColor("--ink-900");
+	const cover = /* @__PURE__ */ jsxs(View, {
+		style: { height },
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: { height },
+				children
+			}),
+			isLiquidGlassAvailable() ? /* @__PURE__ */ jsx(GlassView, {
+				glassEffectStyle: "regular",
+				style: FILL
+			}) : /* @__PURE__ */ jsx(View, {
+				style: FILL,
+				className: "bg-card/85"
+			}),
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: FILL,
+				children: /* @__PURE__ */ jsx(LockBody, {
+					label,
+					sampleLabel,
+					ink
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Panel, {
+		className: cn("overflow-hidden", className),
+		children: [onPress ? /* @__PURE__ */ jsx(Pressable, {
+			onPress,
+			accessible: false,
+			accessibilityLabel: accessibilityLabel ?? label,
+			children: cover
+		}) : cover, footer ? /* @__PURE__ */ jsx(View, {
+			className: "border-t border-line",
+			children: footer
+		}) : null]
+	});
+}
+function LockBody({ label, sampleLabel, ink }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Feather, {
+			name: "lock",
+			size: 20,
+			color: ink
+		}),
+		/* @__PURE__ */ jsx(Text$1, {
+			className: "text-foreground text-center text-[13px] font-semibold leading-[19px]",
+			children: label
+		}),
+		sampleLabel ? /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-center text-[11px] font-semibold tracking-widest",
+			children: sampleLabel
+		}) : null
+	] });
+}
+
+//#endregion
+export { Locked };

package/dist/native/layout/modal.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/modal.d.ts
+export type ModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Heading. Becomes the dialog's name. */
+  title: ReactNode;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  /** Whether tapping the backdrop closes it (default false = require an explicit close). Esc and Android's back action close it regardless of this setting. */
+  dismissOnBackdropPress?: boolean;
+  /** Spoken name of the close button (default "閉じる", i.e. "Close"). This is a shared package, so pass other languages here. */
+  closeLabel?: string;
+};
+/**
+ * A confirmation/editing dialog shown at the center of the screen. Corresponds to the web `layout/modal`.
+ * The shell is an overlay surface (surface radius, shadow-lg; no border), and only the body scrolls.
+ *
+ * The heading is the dialog's name (`aria-labelledby`), and the supplementary text is its description (`aria-describedby`).
+ * The role (`role="dialog"`, `aria-modal`), focus trapping, and Esc are handled by `Modal`.
+ * The web `layout/modal` takes open/close through `dialog` (`DialogController`), whereas native uses `open` / `onOpenChange`.
+ */
+export declare function Modal({ open, onOpenChange, title, description, content, footer, dismissOnBackdropPress, closeLabel }: ModalProps): import("react").JSX.Element;
+//#endregion