@botiverse/raft-ui 0.0.0-stage → 0.7.0

package/dist/wip.d.mts

@@ -0,0 +1,92 @@
+import { O as ButtonProps, T as DialogTrigger, i as DialogClose, s as DialogContentProps, t as Dialog, w as DialogTitleProps } from "./index-B3_j9XYd.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox-select/combobox-select.types.d.ts
+type ComboboxSelectValue = string | number;
+interface ComboboxSelectOption {
+  value: ComboboxSelectValue;
+  label: string;
+  disabled?: boolean;
+}
+interface ComboboxSelectGroup<Option = ComboboxSelectOption> {
+  type: "group";
+  key: string | number;
+  label: ReactNode;
+  children: readonly Option[];
+}
+type ComboboxSelectSelection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxSelectValue[] : ComboboxSelectValue | null;
+interface ComboboxSelectMessages {
+  clear: string;
+  toggle: string;
+  selected: string;
+  chipDescription: string;
+  inputDescription: string;
+  remove: (label: string) => string;
+}
+type RootProps = Combobox.Root.Props<unknown, boolean>;
+type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
+  options: readonly (Option | ComboboxSelectGroup<Option>)[];
+  multiple?: Multiple;
+  value?: ComboboxSelectSelection<Multiple>;
+  defaultValue?: ComboboxSelectSelection<Multiple>;
+  onValueChange?: (value: ComboboxSelectSelection<Multiple>, options: Multiple extends true ? (Option | undefined)[] : Option | undefined | null, details: Combobox.Root.ChangeEventDetails) => void;
+  labelField?: keyof Option;
+  valueField?: keyof Option;
+  disabledField?: keyof Option;
+  /** Supplies labels for values that have not been loaded yet. */
+  fallbackOption?: (value: ComboboxSelectValue) => Option;
+  filterable?: boolean;
+  filter?: false | ((query: string, option: Option) => boolean);
+  /** Display the provided results without local filtering. Requests belong to the caller. */
+  remote?: boolean;
+  onSearch?: (query: string) => void;
+  loading?: boolean;
+  create?: boolean;
+  /** Alias for create, useful when matching Select libraries that call this mode creatable. */
+  creatable?: boolean;
+  /** Called only when the creation row is selected. Return null to reject creation. */
+  onCreate?: (query: string) => Option | null;
+  clearable?: boolean;
+  showArrow?: boolean;
+  clearFilterAfterSelect?: boolean;
+  onClear?: () => void;
+  /** Collapse chips when the control is unfocused; all remain reachable when focused. */
+  maxTagCount?: number;
+  size?: "sm" | "md" | "lg";
+  status?: "error" | "warning";
+  placeholder?: string;
+  renderLabel?: (option: Option) => ReactNode;
+  /** Customizes option content while preserving the Base UI option element. */
+  renderOption?: (option: Option, info: {
+    selected: boolean;
+  }) => ReactNode;
+  /** Customizes chip content while preserving keyboard navigation and removal. */
+  renderTag?: (option: Option) => ReactNode;
+  renderCreateLabel?: (query: string) => ReactNode;
+  emptyContent?: ReactNode;
+  loadingContent?: ReactNode;
+  messages?: Partial<ComboboxSelectMessages>;
+  inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
+  portalProps?: Combobox.Portal.Props;
+  positionerProps?: Omit<Combobox.Positioner.Props, "children">;
+  popupProps?: Omit<Combobox.Popup.Props, "children">;
+  className?: string;
+  style?: CSSProperties;
+};
+//#endregion
+//#region src/components/combobox-select/combobox-select.d.ts
+export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+//#endregion
+//#region src/components/announcement-dialog/announcement-dialog.d.ts
+export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function AnnouncementDialogBody({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogLabel({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export declare function AnnouncementDialogPicture({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogText({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
+export declare function AnnouncementDialogSecondaryAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue };

package/dist/wip.mjs

@@ -0,0 +1,517 @@
+import { S as tv, b as useTheme, f as DialogTitle, i as DialogContent, m as Button, p as DialogTrigger, r as DialogClose, t as Dialog, y as useThemeScopeProps } from "./dialog-CY6S-Xqf.mjs";
+import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox-select/combobox-select.options.ts
+function isOptionGroup(option) {
+	return typeof option === "object" && option !== null && "type" in option && option.type === "group" && "children" in option && Array.isArray(option.children);
+}
+function normalizeOption(option, labelField, valueField, disabledField) {
+	const fields = option;
+	const value = fields[valueField];
+	const label = fields[labelField];
+	if (typeof value !== "string" && typeof value !== "number") throw new Error("ComboboxSelect options must have a string or number value.");
+	return {
+		value,
+		label: typeof label === "string" || typeof label === "number" ? String(label) : String(value),
+		disabled: Boolean(fields[disabledField]),
+		option
+	};
+}
+function optionKey(value) {
+	return `${typeof value}:${value}`;
+}
+//#endregion
+//#region src/components/combobox-select/combobox-select.tsx
+const defaultMessages = {
+	clear: "Clear selection",
+	toggle: "Toggle options",
+	selected: "Selected options",
+	chipDescription: "Press Backspace or Delete to remove",
+	inputDescription: "From the start of the input, press Left Arrow to focus selected options",
+	remove: (label) => `Remove ${label}`
+};
+const defaultRenderCreateLabel = (query) => `Create “${query}”`;
+function recordLabel(record, renderLabel) {
+	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
+}
+function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
+	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+		className: "r-combobox-select__text",
+		children: renderCreateLabel(record.label)
+	})] });
+	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "r-combobox-select__text",
+		children: content
+	}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		className: "r-combobox-select__indicator",
+		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
+	})] });
+}
+function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, renderTag }) {
+	const label = recordLabel(record, renderLabel);
+	const content = record.option === void 0 ? record.label : renderTag?.(record.option) ?? label;
+	const overflow = index >= tagLimit;
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		className: "r-combobox-select__chip",
+		"data-overflow": overflow || void 0,
+		"aria-label": record.label,
+		"aria-description": strings.chipDescription,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "r-combobox-select__text",
+			children: content
+		}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			className: "r-combobox-select__remove",
+			"aria-label": strings.remove(record.label),
+			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+		})]
+	}, optionKey(record.value));
+}
+/** Options-driven composition. The stable compound Combobox API stays unchanged. */
+function isItemEqualToValue(a, b) {
+	return a.createQuery === b.createQuery && a.value === b.value;
+}
+function itemToStringLabel(record) {
+	return record.label;
+}
+function itemToStringValue(record) {
+	return String(record.value);
+}
+function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange, labelField = "label", valueField = "value", disabledField = "disabled", fallbackOption, filterable = true, filter, remote = false, onSearch, loading = false, create = false, creatable, onCreate, clearable = false, showArrow = true, clearFilterAfterSelect = true, onClear, maxTagCount, size = "md", status, placeholder = "Select an option", renderLabel, renderOption, renderTag, renderCreateLabel = defaultRenderCreateLabel, emptyContent = "No options found", loadingContent = "Loading…", messages, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight = true, ...rootProps }) {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const { resolvedMode } = useTheme();
+	const scopedPortalProps = useThemeScopeProps(portalProps ?? {});
+	const strings = {
+		...defaultMessages,
+		...messages
+	};
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (multiple ? [] : null));
+	const selectedValue = value === void 0 ? uncontrolledValue : value;
+	const selectedKeys = useMemo(() => Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue], [selectedValue]);
+	const [query, setQuery] = useState(String(defaultInputValue ?? ""));
+	const [createdOptions, setCreatedOptions] = useState([]);
+	const collator = useMemo(() => new Intl.Collator(void 0, {
+		sensitivity: "base",
+		usage: "search"
+	}), []);
+	const normalized = useMemo(() => {
+		const normalize = (option) => normalizeOption(option, labelField, valueField, disabledField);
+		const groups = [];
+		options.forEach((option, index) => {
+			if (isOptionGroup(option)) groups.push({
+				key: `group:${optionKey(option.key)}`,
+				label: option.label,
+				items: option.children.map(normalize)
+			});
+			else groups.push({
+				key: `option:${index}`,
+				items: [normalize(option)]
+			});
+		});
+		const records = new Map(groups.flatMap((group) => group.items.map((record) => [record.value, record])));
+		const created = createdOptions.map(normalize).filter((record) => !records.has(record.value));
+		created.forEach((record) => records.set(record.value, record));
+		if (created.length) groups.push({
+			key: "created",
+			items: created
+		});
+		return {
+			groups,
+			records
+		};
+	}, [
+		options,
+		createdOptions,
+		labelField,
+		valueField,
+		disabledField
+	]);
+	const [retained, setRetained] = useState(() => /* @__PURE__ */ new Map());
+	const selected = useMemo(() => {
+		return selectedKeys.map((key) => normalized.records.get(key) ?? retained.get(key) ?? (fallbackOption ? normalizeOption(fallbackOption(key), labelField, valueField, disabledField) : {
+			value: key,
+			label: String(key),
+			disabled: false
+		}));
+	}, [
+		selectedKeys,
+		normalized,
+		retained,
+		fallbackOption,
+		labelField,
+		valueField,
+		disabledField
+	]);
+	if (retained.size !== selected.length || !selected.every((record) => retained.get(record.value) === record)) setRetained(new Map(selected.map((record) => [record.value, record])));
+	const search = String(inputValue ?? query).trim();
+	const canCreate = (create || creatable) && filterable && !loading && search !== "" && ![...normalized.records.values(), ...selected].some((record) => record.label.trim().toLocaleLowerCase() === search.toLocaleLowerCase());
+	const items = useMemo(() => {
+		if (!canCreate) return normalized.groups;
+		const candidate = {
+			value: search,
+			label: search,
+			disabled: false,
+			createQuery: search
+		};
+		return [...normalized.groups, {
+			key: "create",
+			items: [candidate]
+		}];
+	}, [
+		canCreate,
+		normalized.groups,
+		search
+	]);
+	const css = `r-combobox-select r-combobox-select--${size}${resolvedMode === "dark" ? " r-combobox-select--dark" : ""}`;
+	const tagLimit = maxTagCount === void 0 ? Infinity : Math.max(0, Math.floor(maxTagCount));
+	const inputClassName = ["r-combobox-select__input", typeof inputProps?.className === "string" ? inputProps.className : null].filter(Boolean).join(" ");
+	const controlClassName = [
+		css,
+		"r-combobox-select__control",
+		className
+	].filter(Boolean).join(" ");
+	const positionerClassName = ["r-combobox-select__positioner", typeof positionerProps?.className === "string" ? positionerProps.className : null].filter(Boolean).join(" ");
+	const popupClassName = [
+		css,
+		"r-combobox-select__popup",
+		typeof popupProps?.className === "string" ? popupProps.className : null
+	].filter(Boolean).join(" ");
+	const inputRef = ref ?? inputProps?.ref;
+	const inputLabel = ariaLabel ?? inputProps?.["aria-label"];
+	const inputLabelledBy = ariaLabelledBy ?? inputProps?.["aria-labelledby"];
+	const inputDescribedBy = ariaDescribedBy ?? inputProps?.["aria-describedby"];
+	const inputInvalid = ariaInvalid ?? (status === "error" ? true : inputProps?.["aria-invalid"]);
+	const inputDescription = multiple && selected.length ? strings.inputDescription : inputProps?.["aria-description"];
+	const inputPlaceholder = multiple && selected.length ? "" : placeholder;
+	const inputReadOnly = readOnly || !filterable;
+	const controlValue = multiple ? selected : selected[0] ?? null;
+	const handleValueChange = useCallback((next, details) => {
+		const nextRecords = next === null ? [] : Array.isArray(next) ? next : [next];
+		const createRecord = nextRecords.find((record) => record.createQuery !== void 0);
+		let newOption;
+		let resolved = nextRecords;
+		if (createRecord) {
+			const created = onCreate ? onCreate(createRecord.label) : {
+				[labelField]: createRecord.label,
+				[valueField]: createRecord.label
+			};
+			if (created === null) {
+				details.cancel();
+				return;
+			}
+			const record = normalizeOption(created, labelField, valueField, disabledField);
+			if (record.disabled) {
+				details.cancel();
+				return;
+			}
+			newOption = created;
+			const existing = normalized.records.get(record.value) ?? retained.get(record.value);
+			resolved = nextRecords.map((item) => item === createRecord ? existing ?? record : item);
+			resolved = [...new Map(resolved.map((item) => [item.value, item])).values()];
+		}
+		const nextValue = multiple ? resolved.map((record) => record.value) : resolved[0]?.value ?? null;
+		const nextOptions = multiple ? resolved.map((record) => record.option) : resolved[0]?.option ?? null;
+		onValueChange?.(nextValue, nextOptions, details);
+		if (details.isCanceled) return;
+		if (newOption !== void 0) setCreatedOptions((previous) => [...previous, newOption]);
+		setRetained(new Map(resolved.map((record) => [record.value, record])));
+		if (value === void 0) setUncontrolledValue(nextValue);
+		if (details.reason === "clear-press") onClear?.();
+	}, [
+		multiple,
+		onCreate,
+		labelField,
+		valueField,
+		disabledField,
+		normalized.records,
+		retained,
+		onValueChange,
+		value,
+		onClear
+	]);
+	const handleInputValueChange = useCallback((next, details) => {
+		onInputValueChange?.(next, details);
+		if (details.isCanceled) return;
+		const shouldKeepQuery = details.reason === "input-change" || details.reason === "item-press" && !clearFilterAfterSelect;
+		setQuery(shouldKeepQuery ? next : "");
+		if (details.reason === "input-change" || details.reason === "clear-press") onSearch?.(next);
+	}, [
+		onInputValueChange,
+		clearFilterAfterSelect,
+		onSearch
+	]);
+	const filterOptions = useCallback((record, pattern) => {
+		if (record.createQuery !== void 0) return true;
+		if (remote || !filterable || filter === false) return true;
+		return record.option !== void 0 && typeof filter === "function" ? filter(pattern, record.option) : collator.compare(record.label.slice(0, pattern.length), pattern) === 0 || record.label.toLocaleLowerCase().includes(pattern.toLocaleLowerCase());
+	}, [
+		remote,
+		filterable,
+		filter,
+		collator
+	]);
+	const selectedChips = selected.map((record, index) => renderSelectedChip({
+		record,
+		index,
+		tagLimit,
+		strings,
+		renderLabel,
+		renderTag
+	}));
+	const overflowCount = selected.length > tagLimit ? selected.length - tagLimit : 0;
+	const overflowTitle = selected.slice(tagLimit).map((record) => record.label).join(", ");
+	const overflow = overflowCount ? /* @__PURE__ */ jsxs("span", {
+		className: "r-combobox-select__overflow",
+		title: overflowTitle,
+		children: ["+", overflowCount]
+	}) : null;
+	function renderRecord(record) {
+		const itemKey = record.createQuery !== void 0 ? "create" : optionKey(record.value);
+		const content = renderOptionContent({
+			record,
+			selected: selected.some((item) => item.value === record.value),
+			renderLabel,
+			renderOption,
+			renderCreateLabel
+		});
+		return /* @__PURE__ */ jsx(Combobox.Item, {
+			value: record,
+			disabled: record.disabled || loading,
+			className: "r-combobox-select__option",
+			children: content
+		}, itemKey);
+	}
+	function renderGroup(group) {
+		const groupLabel = group.label == null ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+			className: "r-combobox-select__group-label",
+			children: group.label
+		});
+		return /* @__PURE__ */ jsxs(Combobox.Group, {
+			items: group.items,
+			children: [groupLabel, /* @__PURE__ */ jsx(Combobox.Collection, { children: renderRecord })]
+		}, group.key);
+	}
+	const input = /* @__PURE__ */ jsx(Combobox.Input, {
+		...inputProps,
+		ref: inputRef,
+		id,
+		"data-slot": "combobox-select-input",
+		className: inputClassName,
+		"aria-label": inputLabel,
+		"aria-labelledby": inputLabelledBy,
+		"aria-describedby": inputDescribedBy,
+		"aria-invalid": inputInvalid,
+		"aria-description": inputDescription,
+		placeholder: inputPlaceholder,
+		readOnly: inputReadOnly
+	});
+	const controlContent = multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
+		className: "r-combobox-select__chips",
+		"aria-label": strings.selected,
+		children: [
+			selectedChips,
+			overflow,
+			input
+		]
+	}) : input;
+	const loadingMessage = loading ? /* @__PURE__ */ jsx("div", {
+		className: "r-combobox-select__message",
+		children: loadingContent
+	}) : null;
+	const emptyMessage = !loading ? /* @__PURE__ */ jsx("div", {
+		className: "r-combobox-select__message",
+		children: emptyContent
+	}) : null;
+	const loadingIndicator = loading ? /* @__PURE__ */ jsx(LoaderCircle, {
+		className: "r-combobox-select__spinner",
+		"aria-hidden": true
+	}) : null;
+	const clearAction = clearable ? /* @__PURE__ */ jsx(Combobox.Clear, {
+		className: "r-combobox-select__action",
+		"aria-label": strings.clear,
+		children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+	}) : null;
+	const triggerAction = showArrow ? /* @__PURE__ */ jsx(Combobox.Trigger, {
+		className: "r-combobox-select__action",
+		"aria-label": strings.toggle,
+		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
+	}) : null;
+	const actions = /* @__PURE__ */ jsxs("span", {
+		className: "r-combobox-select__actions",
+		children: [
+			loadingIndicator,
+			clearAction,
+			triggerAction
+		]
+	});
+	const valueChange = handleValueChange;
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		...rootProps,
+		id,
+		multiple,
+		disabled,
+		readOnly,
+		items,
+		value: controlValue,
+		onValueChange: valueChange,
+		inputValue,
+		defaultInputValue,
+		onInputValueChange: handleInputValueChange,
+		filter: filterOptions,
+		itemToStringLabel,
+		itemToStringValue,
+		isItemEqualToValue,
+		autoHighlight,
+		children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			"data-slot": "combobox-select",
+			"data-status": status,
+			className: controlClassName,
+			style,
+			children: [controlContent, actions]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, {
+			...scopedPortalProps,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				sideOffset: 4,
+				align: "start",
+				...positionerProps,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+					initialFocus: false,
+					finalFocus: false,
+					...popupProps,
+					"data-slot": "combobox-select-popup",
+					className: popupClassName,
+					children: [
+						/* @__PURE__ */ jsx(Combobox.Status, { children: loadingMessage }),
+						/* @__PURE__ */ jsx(Combobox.List, {
+							className: "r-combobox-select__list",
+							"aria-busy": loading,
+							children: renderGroup
+						}),
+						/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage })
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/announcement-dialog/announcement-dialog.tsx
+const announcement = tv({ slots: {
+	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
+	body: [
+		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
+		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
+		"px-5 pt-5"
+	],
+	header: ["flex min-w-0 items-center justify-between gap-3"],
+	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
+	dot: ["shrink-0", "size-[9px] rounded-[2px] border-[1.5px] border-sticker-ink bg-attention-400"],
+	title: ["mt-3 wrap-break-word normal-case", "text-headline font-bold tracking-normal"],
+	picture: ["mt-5 h-44 w-full overflow-hidden border border-line-hairline [&_img]:size-full  [&_img]:object-contain", "rounded-container bg-fill-muted"],
+	text: [
+		"mt-3 min-w-0 wrap-break-word [&_p+p]:mt-3",
+		"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_h1]:font-bold [&_h2]:font-bold [&_h3]:font-bold [&_pre]:max-w-full [&_pre]:overflow-x-auto",
+		"text-subhead text-foreground-muted"
+	],
+	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-5 pt-0 pb-5"],
+	action: ["ml-auto h-auto min-h-8 min-w-0 max-w-full py-1 whitespace-normal text-center font-bold @max-[28rem]/announcement:ml-0 @max-[28rem]/announcement:w-full"],
+	secondary: ["min-w-0 max-w-full px-0 whitespace-normal underline @max-[28rem]/announcement:w-full"]
+} });
+function AnnouncementDialogContent({ className, initialFocus, ref, ...props }) {
+	const localRef = useRef(null);
+	const setRef = useCallback((node) => {
+		localRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const focusAction = useCallback(() => localRef.current?.querySelector("[data-announcement-action]:not(:disabled)") ?? true, []);
+	const { content } = announcement();
+	return /* @__PURE__ */ jsx(DialogContent, {
+		ref: setRef,
+		initialFocus: initialFocus ?? focusAction,
+		className: content({ className }),
+		...props
+	});
+}
+function AnnouncementDialogBody({ className, ...props }) {
+	const { body } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-body",
+		className: body({ className }),
+		...props
+	});
+}
+function AnnouncementDialogHeader({ className, ...props }) {
+	const { header } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-header",
+		className: header({ className }),
+		...props
+	});
+}
+function AnnouncementDialogLabel({ className, children, ...props }) {
+	const { label, dot } = announcement();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "announcement-label",
+		className: label({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: dot()
+		}), children]
+	});
+}
+function AnnouncementDialogTitle({ className, ...props }) {
+	const { title } = announcement();
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		className: title({ className }),
+		...props
+	});
+}
+function AnnouncementDialogPicture({ className, ...props }) {
+	const { picture } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-picture",
+		className: picture({ className }),
+		...props
+	});
+}
+function AnnouncementDialogText({ className, ...props }) {
+	const { text } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-text",
+		className: text({ className }),
+		...props
+	});
+}
+function AnnouncementDialogFooter({ className, ...props }) {
+	const { footer } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function AnnouncementDialogAction({ className, ...props }) {
+	const { action } = announcement();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "accent",
+		"data-announcement-action": true,
+		className: action({ className }),
+		...props
+	});
+}
+function AnnouncementDialogSecondaryAction({ className, ...props }) {
+	const { secondary } = announcement();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "link",
+		className: secondary({ className }),
+		...props
+	});
+}
+//#endregion
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, ComboboxSelect };