@lt-three/love3 0.0.0 → 0.1.1

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

@@ -0,0 +1,35 @@
+import { BaseInputProps } from "../../shared/form.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import "../lib/form.js";
+import React, { ComponentProps } from "react";
+//#region src/web/form/checkbox.d.ts
+/**
+ * The name of the checkbox. One of the following is required (so a checkbox never has no name).
+ * - `checkboxLabel`: text shown on the right (clicking it toggles)
+ * - `label`: the field label shown above (for a standalone checkbox with no text on the right; the label becomes the name)
+ * - `aria-label` / `aria-labelledby`: when there is no visible label (selecting a table row, etc.)
+ */
+type CheckboxNameProps = {
+  checkboxLabel: React.ReactNode;
+} | {
+  checkboxLabel?: undefined;
+  label: React.ReactNode;
+} | {
+  checkboxLabel?: undefined;
+  "aria-label": string;
+} | {
+  checkboxLabel?: undefined;
+  "aria-labelledby": string;
+};
+export type CheckboxProps = BaseInputProps<boolean> & Omit<ComponentProps<typeof Checkbox$1>, "checked" | "onCheckedChange" | "value" | "onChange"> & {
+  /** Vertical alignment of the checkbox and the label */
+  align?: "center" | "start";
+} & CheckboxNameProps;
+/**
+ * A Checkbox that supports both form and controlled use.
+ * - Passing `value` / `onValueChange` selects controlled mode (it uses `atom/checkbox` inside)
+ * - When omitted, it takes the value from the field context
+ */
+export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/form/checkbox.js

@@ -0,0 +1,91 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { Label } from "../base/label.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/checkbox.tsx
+/**
+* A Checkbox that supports both form and controlled use.
+* - Passing `value` / `onValueChange` selects controlled mode (it uses `atom/checkbox` inside)
+* - When omitted, it takes the value from the field context
+*/
+function Checkbox(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(ControlledCheckbox, {
+		...props,
+		value: props.value,
+		onValueChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldCheckbox, { ...props });
+}
+function ControlledCheckbox({ label, required, helpText, description, className, checkboxLabel, align = "center", wrapperClassName, disabled, value, onValueChange, ...rest }) {
+	return /* @__PURE__ */ jsx(Layout, {
+		label,
+		required,
+		helpText,
+		description,
+		className,
+		checkboxLabel,
+		align,
+		wrapperClassName,
+		disabled,
+		checked: value,
+		onCheckedChange: onValueChange,
+		rest
+	});
+}
+function FieldCheckbox({ label, required, helpText, description, debounce, className, checkboxLabel, align = "center", wrapperClassName, disabled, ...rest }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		label,
+		required,
+		helpText,
+		description,
+		className,
+		checkboxLabel,
+		align,
+		wrapperClassName,
+		disabled,
+		checked: value ?? false,
+		onCheckedChange: setValue,
+		rest
+	});
+}
+function Layout({ label, required, helpText, description, className, checkboxLabel, align, wrapperClassName, disabled, checked, onCheckedChange, rest }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-3", align === "start" ? "items-start" : "items-center"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "inline-flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Checkbox$1, {
+						...checkboxLabel === void 0 ? {} : { id },
+						checked,
+						onCheckedChange: (next) => onCheckedChange(next === true),
+						disabled,
+						className,
+						...rest
+					}) }), checkboxLabel === void 0 ? null : /* @__PURE__ */ jsx(Label, {
+						htmlFor: id,
+						className: "cursor-pointer",
+						children: checkboxLabel
+					})]
+				})
+			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/web/form/radio-group.d.ts

@@ -0,0 +1,24 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+import React from "react";
+//#region src/web/form/radio-group.d.ts
+type Option = {
+  value: string;
+  label: string;
+  content?: React.ReactNode;
+};
+export type RadioGroupProps = FieldInputProps & {
+  options: Option[];
+} & ({
+  type: "list";
+  full?: never;
+} | {
+  type: "box";
+  full?: boolean;
+} | {
+  type?: never;
+  full?: boolean;
+});
+export declare function RadioGroup({ label, description, required, helpText, ...rest }: RadioGroupProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/form/radio-group.js

@@ -0,0 +1,75 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Label } from "../base/label.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField } from "../base/form.js";
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../base/radio-group.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/radio-group.tsx
+function RadioGroup({ label, description, required, helpText, ...rest }) {
+	return /* @__PURE__ */ jsxs(FormItem, { children: [
+		label && /* @__PURE__ */ jsx(FormLabel, {
+			required,
+			helpText,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(RadioGroupBody, {
+			hasLabel: Boolean(label),
+			...rest
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		/* @__PURE__ */ jsx(FormMessage, {})
+	] });
+}
+/**
+* The container of the options. It is drawn inside FormItem (the same context as the label), so it can read the label's id.
+* The group itself holds `formItemId` (the target of the label's `htmlFor`) and takes its name from the label through `aria-labelledby`.
+* The input of each option passes its own id to FormControl (one field has several controls, so reusing formItemId would duplicate it).
+*/
+function RadioGroupBody({ hasLabel, options, disabled, debounce, className, full, type = "list" }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	const { formItemId, formLabelId } = useFormField();
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		id: formItemId,
+		"aria-labelledby": hasLabel ? formLabelId : void 0,
+		onValueChange: (next) => setValue(next),
+		value,
+		className: cn(type === "box" && "flex flex-wrap gap-2", className),
+		disabled,
+		children: options.map((option) => /* @__PURE__ */ jsx(RadioOption, {
+			option,
+			type,
+			full
+		}, option.value))
+	});
+}
+function RadioOption({ option, type, full }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Label, {
+		className: cn("cursor-pointer hover:bg-accent/50 grid grid-cols-[min-content_1fr] p-1 gap-y-0 rounded-control px-3", type === "box" && "border py-0 px-3 h-fit", option.content && "pb-3", full && "grow"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("h-9 flex items-center"),
+				children: /* @__PURE__ */ jsx(FormControl, {
+					id,
+					children: /* @__PURE__ */ jsx(RadioGroupItem, {
+						className: cn("cursor-pointer"),
+						value: option.value
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cn("text-sm leading-none font-medium"),
+				children: option.label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-2", type === "box" && "col-span-full  flex-col", type === "list" && "col-start-2"),
+				children: option.content
+			})
+		]
+	});
+}
+
+//#endregion
+export { RadioGroup };

package/dist/web/form/select.d.ts

@@ -0,0 +1,16 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/select.d.ts
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+export type SelectOptionGroup = {
+  label: string;
+  options: SelectOption[];
+};
+export type SelectProps = FieldInputProps & {
+  options: (SelectOption | SelectOptionGroup)[];
+};
+export declare function Select({ label, description, placeholder, disabled, debounce, required, helpText, options, className, wrapperClassName }: SelectProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/select.js

@@ -0,0 +1,44 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { Select as Select$1, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../base/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/select.tsx
+const emptyValue = ":EMPTY:";
+function isOptionGroup(option) {
+	return "options" in option;
+}
+function renderOption(option) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: option.value ? option.value : emptyValue,
+		children: option.label
+	}, option.value);
+}
+function Select({ label, description, placeholder, disabled, debounce, required, helpText, options, className, wrapperClassName }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Select$1, {
+				value,
+				onValueChange: (next) => setValue(emptyValue === next ? "" : next),
+				disabled,
+				children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
+					className: cn("w-full cursor-pointer", className),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? "選択してください" })
+				}) }), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => isOptionGroup(option) ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: option.label }), option.options.map(renderOption)] }, option.label) : renderOption(option)) })]
+			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Select };

package/dist/web/form/slider.d.ts

@@ -0,0 +1,19 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+import React from "react";
+//#region src/web/form/slider.d.ts
+/**
+ * The field type for Slider allows both a single value (`number`) and a range (`number[]`) (which one is decided by the field's value).
+ */
+export type SliderProps = FieldInputProps & {
+  min?: number;
+  max: number;
+  step?: number;
+  formattedValue?: React.ReactNode;
+};
+/**
+ * The Slider with TanStack Form integration. The value comes from the field context.
+ * If you need a controlled one, use `atom/slider`.
+ */
+export declare function Slider(props: SliderProps): React.JSX.Element;
+//#endregion

package/dist/web/form/slider.js

@@ -0,0 +1,51 @@
+import { useFieldValue } from "../../shared/form.js";
+import { FormControl, FormDescription, FormItem, FormMessage } from "../base/form.js";
+import { Slider as Slider$1 } from "../atom/slider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/slider.tsx
+/**
+* The Slider with TanStack Form integration. The value comes from the field context.
+* If you need a controlled one, use `atom/slider`.
+*/
+function Slider(props) {
+	const { label, required, description, helpText, min, max, step, debounce, disabled, className, wrapperClassName, formattedValue } = props;
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			/* @__PURE__ */ jsx(FormControl, { children: Array.isArray(value) ? /* @__PURE__ */ jsx(Slider$1, {
+				value,
+				onValueChange: (next) => setValue(next),
+				label,
+				required,
+				helpText,
+				min,
+				max,
+				step,
+				disabled,
+				className,
+				formattedValue,
+				wrapperClassName: "contents"
+			}) : /* @__PURE__ */ jsx(Slider$1, {
+				value: typeof value === "number" ? value : 0,
+				onValueChange: (next) => setValue(next),
+				label,
+				required,
+				helpText,
+				min,
+				max,
+				step,
+				disabled,
+				className,
+				formattedValue,
+				wrapperClassName: "contents"
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Slider };

package/dist/web/form/switch.d.ts

@@ -0,0 +1,11 @@
+import { BaseInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/switch.d.ts
+export type SwitchProps = BaseInputProps<boolean>;
+/**
+ * A Switch that supports both form and controlled use.
+ * - Passing `value` / `onValueChange` selects controlled mode (it does not read the field context, so it works outside a field)
+ * - When omitted, it takes the value from the field context
+ */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/switch.js

@@ -0,0 +1,50 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { Switch as Switch$1 } from "../base/switch.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/switch.tsx
+/**
+* A Switch that supports both form and controlled use.
+* - Passing `value` / `onValueChange` selects controlled mode (it does not read the field context, so it works outside a field)
+* - When omitted, it takes the value from the field context
+*/
+function Switch(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: props.value,
+		onCheckedChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldSwitch, { ...props });
+}
+function FieldSwitch(props) {
+	const [value, setValue] = useFieldValue({ debounce: props.debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: value ?? false,
+		onCheckedChange: setValue
+	});
+}
+function Layout({ label, required, description, disabled, helpText, className, checked, onCheckedChange }) {
+	return /* @__PURE__ */ jsxs(FormItem, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: cn("h-9 flex items-center justify-between"),
+			children: [label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}), /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch$1, {
+				className: cn("h-fit cursor-pointer", className),
+				checked,
+				onCheckedChange,
+				disabled
+			}) })]
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		/* @__PURE__ */ jsx(FormMessage, {})
+	] });
+}
+
+//#endregion
+export { Switch };

package/dist/web/form/text-area.d.ts

@@ -0,0 +1,10 @@
+import { FieldInputProps } from "../../shared/form.js";
+import { Textarea as Textarea$1 } from "../base/textarea.js";
+import "../lib/form.js";
+import { ComponentProps } from "react";
+//#region src/web/form/text-area.d.ts
+export type TextareaProps = FieldInputProps & Omit<ComponentProps<typeof Textarea$1>, "name" | "className" | "value" | "defaultValue" | "onChange"> & {
+  fullHeight?: boolean;
+};
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/text-area.js

@@ -0,0 +1,31 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { Textarea as Textarea$1 } from "../base/textarea.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/text-area.tsx
+function Textarea(props) {
+	const { label, required, description, debounce, className, fullHeight, ...remain } = props;
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: cn(fullHeight && "h-full"),
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea$1, {
+				value: value ?? "",
+				onChange: (e) => setValue(e.currentTarget.value),
+				className: cn("min-h-[200px] text-sm", className),
+				...remain
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Textarea };

package/dist/web/form/text-input.d.ts

@@ -0,0 +1,10 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/text-input.d.ts
+export type TextInputProps = {
+  type?: "text" | "email" | "password" | "tel" | "url" | "number";
+  /** Hint for the browser's autofill (`email`, `current-password`, `one-time-code` and so on; a value of the HTML `autocomplete` attribute). */
+  autoComplete?: string;
+} & FieldInputProps;
+export declare function TextInput({ label, required, description, debounce, className, wrapperClassName, type, helpText, ...remain }: TextInputProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,42 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { Input } from "../base/input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/text-input.tsx
+function TextInput({ label, required, description, debounce, className, wrapperClassName, type, helpText, ...remain }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(FormControl, { children: type === "number" ? /* @__PURE__ */ jsx(Input, {
+				type,
+				value: value ?? "",
+				onChange: (e) => {
+					const next = e.currentTarget.valueAsNumber;
+					if (Number.isNaN(next)) setValue(null);
+					else setValue(next);
+				},
+				className: cn("text-sm", className),
+				...remain
+			}) : /* @__PURE__ */ jsx(Input, {
+				value: value ?? "",
+				type,
+				onChange: (e) => setValue(e.currentTarget.value),
+				className: cn("text-sm", className),
+				...remain
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { TextInput };

package/dist/web/index.d.ts

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

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

@@ -0,0 +1,26 @@
+import { Accordion as Accordion$1 } from "../base/accordion.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/layout/accordion.d.ts
+export type AccordionEntry = {
+  /** A stable ID used for the Radix item's value. */
+  value: string;
+  trigger: ReactNode;
+  content: ReactNode;
+};
+type RootProps = ComponentProps<typeof Accordion$1>;
+/** A distributive Omit, to keep Radix's single / multiple discriminated union. */
+type DistributedOmit<T, K extends keyof never> = T extends unknown ? Omit<T, K> : never;
+export type AccordionProps = DistributedOmit<RootProps, "children"> & {
+  items: AccordionEntry[];
+  /** Extra class attached to the outside of each item. */
+  itemClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+/**
+ * A data-driven Accordion wrapping the shadcn primitives.
+ * Callers do not have to assemble Item / Trigger / Content themselves.
+ */
+export declare function Accordion({ items, itemClassName, triggerClassName, contentClassName, className, ...rest }: AccordionProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/accordion.js

@@ -0,0 +1,29 @@
+import { cn } from "../lib/utils.js";
+import { Accordion as Accordion$1, AccordionContent, AccordionItem, AccordionTrigger } from "../base/accordion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/accordion.tsx
+/**
+* A data-driven Accordion wrapping the shadcn primitives.
+* Callers do not have to assemble Item / Trigger / Content themselves.
+*/
+function Accordion({ items, itemClassName, triggerClassName, contentClassName, className, ...rest }) {
+	return /* @__PURE__ */ jsx(Accordion$1, {
+		className,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: item.value,
+			className: cn(itemClassName),
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: cn(triggerClassName),
+				children: item.trigger
+			}), /* @__PURE__ */ jsx(AccordionContent, {
+				className: cn(contentClassName),
+				children: item.content
+			})]
+		}, item.value))
+	});
+}
+
+//#endregion
+export { Accordion };

package/dist/web/layout/alert-modal.d.ts

@@ -0,0 +1,41 @@
+import * as React$1 from "react";
+//#region src/web/layout/alert-modal.d.ts
+export type AlertModalTone = "default" | "danger";
+export type AlertModalAction = {
+  label: string;
+  onClick: () => void;
+  /**
+   * When omitted: "the last action is the primary action (indigo fill; for danger, the destructive-solid fill), and the others are border only (outline)".
+   */
+  emphasis?: "primary" | "secondary";
+  disabled?: boolean;
+  "data-testid"?: string;
+};
+type AlertModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** `danger` is a confirmation of an action that cannot be undone. A state-error icon is added to the left of the heading, and the primary action gets the destructive-solid fill (the heading text colour stays normal). */
+  tone?: AlertModalTone;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  /** Laid out right-aligned, in order from the left. Usually [cancel, primary action]. */
+  actions: AlertModalAction[];
+  /** When false, a scrim click or Esc does not close it (to make the user choose one of the actions). */
+  dismissible?: boolean;
+  "data-testid"?: string;
+};
+/**
+ * A small modal for confirmation (it has no ×).
+ *
+ * Overlay surface, p-5, width 400 (fitted to the viewport). A heading (16/24 semibold) and body text (13/20, muted), with right-aligned actions (gap-2, the default Button size).
+ * With `danger`, a small state-error icon is added to the left of the heading and the primary action gets the destructive-solid fill.
+ * No border and no ring (it floats on the shadow alone, like `DialogContent`). The caller holds the open state (controlled only).
+ *
+ * While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS.
+ *
+ * The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+ * (so that no ring appears on the first button when opened with the mouse; `useModalOpenAutoFocus`).
+ */
+export declare function AlertModal({ open, onOpenChange, tone, title, description, actions, dismissible, "data-testid": testId }: AlertModalProps): React$1.JSX.Element;
+//#endregion
+export {};