raft-ui 0.0.1

package/dist/wip.mjs

@@ -0,0 +1,1416 @@
+import { l as tv, n as LabelAsterisk, o as useThemeFamily, r as LabelOptional } from "./label-DWq4ia5I.mjs";
+import { cn } from "./cn.mjs";
+import { Button } from "@base-ui/react/button";
+import { useCallback, useRef, useState } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MessageSquare } from "lucide-react";
+import { Field as Field$1 } from "@base-ui/react/field";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Dialog } from "@base-ui/react/dialog";
+import { useHotkey } from "@tanstack/react-hotkeys";
+//#region src/components/field/field.tsx
+const field = tv({
+	slots: {
+		root: ["group/field flex flex-col gap-1.5"],
+		item: ["group/field-item flex items-start gap-2", "[&>[data-slot=checkbox]]:mt-px"],
+		label: ["block leading-none", "group-data-[disabled]/field:text-foreground-disabled"],
+		description: ["text-xs leading-5", "group-data-[disabled]/field:text-foreground-disabled"],
+		error: ["text-xs leading-5", "group-data-[disabled]/field:text-foreground-disabled"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: ["gap-1"],
+				label: ["font-bold text-foreground-strong"],
+				description: ["text-foreground/50"],
+				error: ["text-danger-base"]
+			},
+			elegant: {
+				label: ["font-medium text-foreground"],
+				description: ["text-[13px] text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]", "group-data-[disabled]/field:text-foreground-disabled"],
+				error: ["text-[13px] text-danger-base"]
+			}
+		},
+		size: {
+			sm: { label: "text-xs" },
+			md: { label: "text-sm" }
+		}
+	},
+	compoundVariants: [{
+		theme: "brutal",
+		size: "sm",
+		class: { label: "text-foreground/60" }
+	}],
+	defaultVariants: { size: "md" }
+});
+function Field({ className, ...props }) {
+	const { root } = field({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		"data-slot": "field",
+		className: root({ className }),
+		...props
+	});
+}
+function FieldItem({ className, ...props }) {
+	const { item } = field({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Field$1.Item, {
+		"data-slot": "field-item",
+		className: item({ className }),
+		...props
+	});
+}
+function FieldLabel({ size, required, optional, className, children, ...props }) {
+	const { label } = field({
+		theme: useThemeFamily(),
+		size
+	});
+	return /* @__PURE__ */ jsxs(Field$1.Label, {
+		"data-slot": "field-label",
+		className: label({ className }),
+		...props,
+		children: [
+			children,
+			required ? /* @__PURE__ */ jsx(LabelAsterisk, { className: "ml-1" }) : null,
+			optional ? /* @__PURE__ */ jsx(LabelOptional, { className: "ml-1" }) : null
+		]
+	});
+}
+function FieldDescription({ className, ...props }) {
+	const { description } = field({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Field$1.Description, {
+		"data-slot": "field-description",
+		className: description({ className }),
+		...props
+	});
+}
+function FieldError({ className, role = "alert", ...props }) {
+	const { error } = field({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Field$1.Error, {
+		"data-slot": "field-error",
+		role,
+		className: error({ className }),
+		...props
+	});
+}
+function FieldControl(props) {
+	return /* @__PURE__ */ jsx(Field$1.Control, {
+		"data-slot": "field-control",
+		...props
+	});
+}
+function FieldValidity(props) {
+	return /* @__PURE__ */ jsx(Field$1.Validity, { ...props });
+}
+//#endregion
+//#region src/components/text/text.tsx
+const textColorVariants = {
+	default: ["text-foreground-strong"],
+	primary: ["text-primary-700"],
+	information: ["text-info-dark"],
+	muted: ["text-foreground-muted"],
+	accent: ["text-accent-700"],
+	success: ["text-success-base"],
+	warning: ["text-warning-base"],
+	danger: ["text-danger-base"]
+};
+const heading = tv({
+	base: ["m-0 font-heading font-medium text-foreground-strong"],
+	variants: {
+		level: {
+			1: ["text-[3.5rem] tracking-[-0.01em] leading-[64px]"],
+			2: ["text-[3rem] tracking-[-0.01em] leading-[56px]"],
+			3: ["text-[2.5rem] tracking-[-0.01em] leading-[48px]"],
+			4: ["text-[2rem] tracking-[-0.005em] leading-[40px]"],
+			5: ["text-[1.5rem] leading-8"],
+			6: ["text-[1.25rem] leading-7"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { level: 1 }
+});
+const sans = tv({
+	base: ["m-0 font-sans font-normal"],
+	variants: {
+		size: {
+			large: ["text-lg leading-7 text-foreground"],
+			body: ["text-base leading-6 text-foreground"],
+			small: ["text-sm leading-5 text-foreground-muted"],
+			caption: ["text-xs leading-4 text-foreground-muted"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { size: "body" }
+});
+const mono = tv({
+	base: ["m-0 font-mono font-normal"],
+	variants: {
+		size: {
+			code: ["text-sm leading-5 text-foreground"],
+			meta: ["text-xs leading-4 text-foreground-muted"],
+			eyebrow: ["text-[10px] font-medium uppercase tracking-wide leading-none", "text-foreground-placeholder"],
+			tabular: ["text-sm tabular-nums leading-5 text-foreground"]
+		},
+		variant: textColorVariants
+	},
+	defaultVariants: { size: "code" }
+});
+function TextHeading({ level = 1, variant, className, render, ...props }) {
+	const defaultProps = { className: heading({
+		level,
+		variant,
+		className
+	}) };
+	return useRender({
+		defaultTagName: `h${level}`,
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "text-heading",
+			level,
+			variant
+		}
+	});
+}
+function TextSans({ size = "body", variant, className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: sans({
+			size,
+			variant,
+			className
+		}) }, props),
+		state: {
+			slot: "text-sans",
+			size,
+			variant
+		}
+	});
+}
+function TextMono({ size = "code", variant, className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: mono({
+			size,
+			variant,
+			className
+		}) }, props),
+		state: {
+			slot: "text-mono",
+			size,
+			variant
+		}
+	});
+}
+const Text = {
+	Heading: TextHeading,
+	Sans: TextSans,
+	Mono: TextMono
+};
+//#endregion
+//#region src/components/toggle-group/toggle-group.tsx
+const toggleGroup = tv({
+	slots: {
+		root: ["inline-flex max-w-full flex-wrap items-center gap-1"],
+		item: [
+			"flex h-7 min-w-0 shrink-0 items-center gap-1 px-2",
+			"text-xs font-bold transition-colors",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5"
+		],
+		label: ["truncate"],
+		count: ["font-mono text-[10px] leading-none"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				item: [
+					"border-2 border-line-strong bg-layer-panel text-foreground-strong",
+					"hover:bg-primary-400/30 data-[pressed]:bg-primary-400 data-[pressed]:text-foreground-strong",
+					"data-[pressed]:shadow-sm data-[disabled]:cursor-not-allowed"
+				],
+				count: ["text-foreground/40", "group-data-[pressed]/toggle-group-item:text-foreground/60"]
+			},
+			elegant: {}
+		},
+		disabled: {
+			true: { root: "opacity-50" },
+			false: { root: "" }
+		}
+	},
+	defaultVariants: { disabled: false }
+});
+function ToggleGroup({ value, onValueChange, ariaLabel, disabled = false, className, ...props }) {
+	const { root } = toggleGroup({ disabled });
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		value: [value],
+		onValueChange: (nextValue, eventDetails) => {
+			const selectedValue = nextValue[0];
+			if (selectedValue) onValueChange(selectedValue, eventDetails);
+		},
+		"aria-label": ariaLabel,
+		disabled,
+		"data-slot": "toggle-group",
+		className: root({ className }),
+		...props
+	});
+}
+function ToggleGroupItem({ className, ...props }) {
+	const { item } = toggleGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Toggle, {
+		type: "button",
+		"data-slot": "toggle-group-item",
+		className: item({ className: `group/toggle-group-item ${className ?? ""}`.trim() }),
+		...props
+	});
+}
+function ToggleGroupLabel({ className, ...props }) {
+	const { label } = toggleGroup();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toggle-group-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ToggleGroupCount({ className, ...props }) {
+	const { count } = toggleGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toggle-group-count",
+		className: count({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/preview-shell/preview-shell.tsx
+const previewShell = tv({
+	slots: { root: [] },
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {}
+		},
+		variant: {
+			default: { root: "border border-line-muted bg-layer-panel hover:border-line-subtle hover:bg-layer-muted" },
+			muted: { root: "border-2 border-line-subtle bg-layer-muted italic text-foreground/40 hover:shadow-sm" }
+		}
+	},
+	defaultVariants: { variant: "default" }
+});
+function PreviewShell({ variant, className, render, ...props }) {
+	const { root } = previewShell({
+		theme: useThemeFamily(),
+		variant
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: {
+			slot: "preview-shell",
+			variant
+		}
+	});
+}
+//#endregion
+//#region src/components/list-item/list-item.tsx
+const listItem = tv({
+	slots: {
+		root: ["px-4 py-3 transition-colors"],
+		body: [
+			"min-w-0",
+			"grid grid-cols-[minmax(0,1fr)]",
+			"has-[>[data-slot=list-item-icon]]:grid-cols-[auto_minmax(0,1fr)]",
+			"has-[>[data-slot=list-item-icon]]:items-start",
+			"has-[>[data-slot=list-item-icon]]:gap-x-2",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-icon]]:col-start-1",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-icon]]:row-start-1",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-row]]:col-start-2",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:col-span-2",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:col-start-1",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:row-start-2",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-meta]]:col-start-2",
+			"has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-action-group]]:col-start-2"
+		],
+		icon: ["shrink-0 self-start", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+		row: ["flex min-w-0 flex-wrap items-center gap-2", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+		title: ["break-words text-sm font-bold"],
+		description: ["mt-1 text-xs"],
+		meta: ["mt-1 flex min-w-0 flex-wrap items-center gap-2 text-xs", "[&_svg]:size-3 [&_svg]:shrink-0"],
+		actionGroup: ["mt-2 flex flex-wrap items-center gap-2", "[&_svg]:size-3 [&_svg]:shrink-0"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: ["border-2"],
+				icon: ["mt-0.5 text-foreground/50"],
+				title: "text-foreground-strong",
+				description: "text-foreground/60",
+				meta: "text-foreground/50"
+			},
+			elegant: {
+				root: [
+					"rounded-sm border",
+					"border-line-muted bg-layer-panel",
+					"outline-none",
+					"transition-[background-color,border-color] duration-150",
+					"focus-visible:ring-2 focus-visible:ring-line-focus"
+				],
+				icon: ["mt-0.5 text-foreground-muted"],
+				row: ["items-center gap-2"],
+				title: ["text-sm font-medium leading-snug tracking-[-0.005em]", "text-foreground-strong"],
+				description: ["mt-1 text-[0.8125rem] font-normal leading-normal", "text-foreground-muted"],
+				meta: ["text-foreground-muted"],
+				actionGroup: ["mt-2 gap-2"]
+			}
+		},
+		selected: {
+			true: { root: "" },
+			false: { root: "" }
+		},
+		interactive: {
+			true: { root: "" },
+			false: { root: "" }
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			selected: true,
+			class: { root: "border-line-strong bg-info-base/15 shadow-sm" }
+		},
+		{
+			theme: "brutal",
+			selected: false,
+			class: { root: "border-line-subtle bg-layer-panel" }
+		},
+		{
+			theme: "brutal",
+			selected: false,
+			interactive: true,
+			class: { root: "hover:border-line-strong hover:shadow-sm" }
+		},
+		{
+			theme: "elegant",
+			selected: true,
+			class: { root: ["border-info-light", "bg-info-lighter"] }
+		},
+		{
+			theme: "elegant",
+			selected: false,
+			interactive: true,
+			class: { root: "hover:bg-layer-muted" }
+		}
+	],
+	defaultVariants: {
+		selected: false,
+		interactive: true
+	}
+});
+function ListItem({ selected, interactive, className, render, ...props }) {
+	const { root } = listItem({
+		theme: useThemeFamily(),
+		selected,
+		interactive
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "list-item" }
+	});
+}
+function ListItemBody({ className, render, ...props }) {
+	const { body } = listItem();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "list-item-body" }
+	});
+}
+function ListItemIcon({ className, render, ...props }) {
+	const { icon } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: icon({ className }) }, props),
+		state: { slot: "list-item-icon" }
+	});
+}
+function ListItemRow({ className, render, ...props }) {
+	const { row } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: row({ className }) }, props),
+		state: { slot: "list-item-row" }
+	});
+}
+function ListItemTitle({ className, render, ...props }) {
+	const { title } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "list-item-title" }
+	});
+}
+function ListItemDescription({ className, render, ...props }) {
+	const { description } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: description({ className }) }, props),
+		state: { slot: "list-item-description" }
+	});
+}
+function ListItemMeta({ className, render, ...props }) {
+	const { meta } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: meta({ className }) }, props),
+		state: { slot: "list-item-meta" }
+	});
+}
+function ListItemActionGroup({ className, render, ...props }) {
+	const { actionGroup } = listItem({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actionGroup({ className }) }, props),
+		state: { slot: "list-item-action-group" }
+	});
+}
+//#endregion
+//#region src/components/media-list-item/media-list-item.tsx
+const mediaItem = tv({
+	slots: {
+		row: ["group/media-item flex w-full min-w-0 gap-3"],
+		body: ["flex min-w-0 flex-1 gap-3", "items-center group-data-[align=start]/media-item:items-start"],
+		text: ["min-w-0 flex-1"],
+		textInner: ["flex min-w-0 flex-wrap items-baseline gap-x-2", "group-data-[align=start]/media-item:flex-col group-data-[align=start]/media-item:flex-nowrap group-data-[align=start]/media-item:items-stretch group-data-[align=start]/media-item:gap-x-1 group-data-[align=start]/media-item:gap-y-1"],
+		visual: ["shrink-0"],
+		title: ["truncate text-sm font-bold"],
+		subtitle: [
+			"font-mono text-xs",
+			"[&_svg]:size-3 [&_svg]:shrink-0",
+			"group-data-[align=start]/media-item:flex group-data-[align=start]/media-item:min-w-0 group-data-[align=start]/media-item:flex-wrap group-data-[align=start]/media-item:items-center group-data-[align=start]/media-item:gap-x-2 group-data-[align=start]/media-item:gap-y-1"
+		],
+		aside: ["flex shrink-0 items-center gap-1.5 self-center", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+		actionGroup: ["flex shrink-0 items-center gap-1.5 self-center", "[&_svg]:size-3.5 [&_svg]:shrink-0"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				title: "text-foreground-strong",
+				subtitle: "text-foreground/50"
+			},
+			elegant: {}
+		},
+		align: {
+			start: { row: "items-start" },
+			center: { row: "items-center" }
+		},
+		interactive: {
+			true: { body: "text-left" },
+			false: { body: "" }
+		}
+	},
+	defaultVariants: { align: "center" }
+});
+function MediaListItem({ align = "center", selected, interactive, className, children, ...props }) {
+	const { row } = mediaItem({ align });
+	return /* @__PURE__ */ jsx(ListItem, {
+		"data-slot": "media-list-item",
+		selected,
+		interactive: interactive ?? false,
+		className: cn("group px-3 py-2 has-[[data-interactive=true]]:hover:border-line-strong has-[[data-interactive=true]]:hover:shadow-sm", className),
+		children: /* @__PURE__ */ jsx("div", {
+			"data-align": align,
+			className: row(),
+			...props,
+			children
+		})
+	});
+}
+function MediaListItemBody({ render, onClick, className, ...props }) {
+	const interactive = onClick !== void 0;
+	const { body } = mediaItem({ interactive });
+	const defaultProps = {
+		"data-slot": "media-list-item-body",
+		"data-interactive": interactive ? "true" : void 0,
+		onClick,
+		className: body({ className })
+	};
+	return useRender({
+		render: render ?? (interactive ? /* @__PURE__ */ jsx(Button, { type: "button" }) : /* @__PURE__ */ jsx("div", {})),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MediaListItemText({ className, children, ...props }) {
+	const { text, textInner } = mediaItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-list-item-text",
+		className: text({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: textInner(),
+			children
+		})
+	});
+}
+function MediaListItemVisual({ className, ...props }) {
+	const { visual } = mediaItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-list-item-visual",
+		className: visual({ className }),
+		...props
+	});
+}
+function MediaListItemTitle({ className, ...props }) {
+	const { title } = mediaItem({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "media-list-item-title",
+		className: title({ className }),
+		...props
+	});
+}
+function MediaListItemSubtitle({ className, ...props }) {
+	const { subtitle } = mediaItem({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "media-list-item-subtitle",
+		className: subtitle({ className }),
+		...props
+	});
+}
+function MediaListItemAside({ className, ...props }) {
+	const { aside } = mediaItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-list-item-aside",
+		className: aside({ className }),
+		...props
+	});
+}
+function MediaListItemActionGroup({ className, ...props }) {
+	const { actionGroup } = mediaItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-list-item-action-group",
+		className: actionGroup({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/panel-header/panel-header.tsx
+const panelHeader = tv({
+	slots: {
+		root: ["flex h-[62px] items-center gap-3 px-5", "[@media(max-height:600px)]:h-12"],
+		icon: ["hidden size-9 shrink-0 items-center justify-center border-2 md:flex", "[&_svg]:size-[18px]"],
+		visual: ["hidden shrink-0 md:flex"],
+		content: ["min-w-0 flex-1"],
+		titleRow: ["flex min-w-0 items-center gap-2"],
+		title: ["truncate text-base font-bold leading-tight"],
+		suffix: ["shrink-0"],
+		subtitle: ["truncate font-mono text-xs"],
+		actions: ["flex shrink-0 items-center gap-1.5"]
+	},
+	variants: { theme: {
+		brutal: {
+			root: "border-b-2 border-line-strong bg-layer-panel",
+			icon: "border-line-strong",
+			title: "text-foreground-strong",
+			subtitle: "text-foreground/50"
+		},
+		elegant: {}
+	} }
+});
+function PanelHeader({ className, render, ...props }) {
+	const { root } = panelHeader({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "panel-header" }
+	});
+}
+function PanelHeaderIcon({ className, render, ...props }) {
+	const { icon } = panelHeader({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: icon({ className }) }, props),
+		state: { slot: "panel-header-icon" }
+	});
+}
+function PanelHeaderVisual({ className, render, ...props }) {
+	const { visual } = panelHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: visual({ className }) }, props),
+		state: { slot: "panel-header-visual" }
+	});
+}
+function PanelHeaderContent({ className, render, ...props }) {
+	const { content } = panelHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props),
+		state: { slot: "panel-header-content" }
+	});
+}
+function PanelHeaderTitleRow({ className, render, ...props }) {
+	const { titleRow } = panelHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: titleRow({ className }) }, props),
+		state: { slot: "panel-header-title-row" }
+	});
+}
+function PanelHeaderTitle({ className, render, ...props }) {
+	const { title } = panelHeader({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "h2",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "panel-header-title" }
+	});
+}
+function PanelHeaderSuffix({ className, render, ...props }) {
+	const { suffix } = panelHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: suffix({ className }) }, props),
+		state: { slot: "panel-header-suffix" }
+	});
+}
+function PanelHeaderSubtitle({ className, render, ...props }) {
+	const { subtitle } = panelHeader({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: subtitle({ className }) }, props),
+		state: { slot: "panel-header-subtitle" }
+	});
+}
+function PanelHeaderActions({ className, render, ...props }) {
+	const { actions } = panelHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actions({ className }) }, props),
+		state: { slot: "panel-header-actions" }
+	});
+}
+//#endregion
+//#region src/components/quoted-message-card/quoted-message-card.tsx
+const quotedMessageCard = tv({
+	slots: {
+		root: ["group block w-full text-left"],
+		body: ["px-2.5 py-2 sm:px-3 sm:py-2.5"],
+		unavailable: ["text-[13px] leading-snug"],
+		header: ["mb-1 flex items-start gap-2 sm:mb-1.5"],
+		meta: ["flex min-w-0 flex-1 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs leading-none"],
+		channel: ["inline-flex items-center gap-1 font-bold", "[&_svg]:size-[11px] [&_svg]:shrink-0"],
+		separator: ["text-foreground/30"],
+		author: ["inline-flex min-w-0 items-center gap-1.5"],
+		authorName: ["truncate font-bold"],
+		authorSubtitle: ["truncate font-mono text-[10px]"],
+		thread: ["inline-flex items-center gap-1 font-bold", "[&_svg]:size-2.5 [&_svg]:shrink-0"],
+		tag: ["inline-flex items-center gap-1 border-[1.5px] border-line-strong px-1.5 py-0.5", "text-[11px] font-bold leading-none"],
+		timestamp: ["shrink-0 font-mono text-[10px]"],
+		contentWrap: ["min-w-0"],
+		content: ["line-clamp-2 text-xs leading-snug sm:text-[13px]"],
+		attachments: ["mt-2 flex flex-wrap gap-1.5"]
+	},
+	variants: { theme: {
+		brutal: {
+			channel: "text-foreground/70",
+			authorName: "text-foreground/70",
+			authorSubtitle: "text-foreground/40",
+			thread: "text-accent-400",
+			timestamp: "text-foreground/40",
+			content: "text-foreground-strong"
+		},
+		elegant: {}
+	} }
+});
+function QuotedMessageCard({ className, "data-testid": testId = "quoted-message-card", ...props }) {
+	const { root } = quotedMessageCard();
+	return /* @__PURE__ */ jsx(PreviewShell, {
+		"data-testid": testId,
+		className: root({ className }),
+		...props
+	});
+}
+function QuotedMessageCardBody({ className, render, ...props }) {
+	const { body } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "quoted-message-card-body" }
+	});
+}
+function QuotedMessageCardUnavailable({ className, render, ...props }) {
+	const { unavailable } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: unavailable({ className }) }, props),
+		state: { slot: "quoted-message-card-unavailable" }
+	});
+}
+function QuotedMessageCardHeader({ className, render, ...props }) {
+	const { header } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "quoted-message-card-header" }
+	});
+}
+function QuotedMessageCardMeta({ className, render, ...props }) {
+	const { meta } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: meta({ className }) }, props),
+		state: { slot: "quoted-message-card-meta" }
+	});
+}
+function QuotedMessageCardChannel({ className, render, ...props }) {
+	const { channel } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: channel({ className }) }, props),
+		state: { slot: "quoted-message-card-channel" }
+	});
+}
+function QuotedMessageCardSeparator({ className, render, ...props }) {
+	const { separator } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: separator({ className }),
+			children: "·"
+		}, props),
+		state: { slot: "quoted-message-card-separator" }
+	});
+}
+function QuotedMessageCardAuthor({ className, render, ...props }) {
+	const { author } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: author({ className }) }, props),
+		state: { slot: "quoted-message-card-author" }
+	});
+}
+function QuotedMessageCardAuthorName({ className, render, ...props }) {
+	const { authorName } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorName({ className }) }, props),
+		state: { slot: "quoted-message-card-author-name" }
+	});
+}
+function QuotedMessageCardAuthorSubtitle({ className, render, ...props }) {
+	const { authorSubtitle } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorSubtitle({ className }) }, props),
+		state: { slot: "quoted-message-card-author-subtitle" }
+	});
+}
+function QuotedMessageCardThread({ className, render, children = "Thread", ...props }) {
+	const { thread } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: thread({ className }),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
+		}, props),
+		state: { slot: "quoted-message-card-thread" }
+	});
+}
+function QuotedMessageCardTag({ className, render, ...props }) {
+	const { tag } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: tag({ className }) }, props),
+		state: { slot: "quoted-message-card-tag" }
+	});
+}
+function QuotedMessageCardTimestamp({ className, render, ...props }) {
+	const { timestamp } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: timestamp({ className }) }, props),
+		state: { slot: "quoted-message-card-timestamp" }
+	});
+}
+function QuotedMessageCardContentWrap({ className, render, ...props }) {
+	const { contentWrap } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: contentWrap({ className }) }, props),
+		state: { slot: "quoted-message-card-content-wrap" }
+	});
+}
+function QuotedMessageCardContent({ className, render, ...props }) {
+	const { content } = quotedMessageCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props),
+		state: { slot: "quoted-message-card-content" }
+	});
+}
+function QuotedMessageCardAttachments({ className, render, ...props }) {
+	const { attachments } = quotedMessageCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: attachments({ className }) }, props),
+		state: { slot: "quoted-message-card-attachments" }
+	});
+}
+//#endregion
+//#region src/components/conversation-preview-card/conversation-preview-card.tsx
+const conversationPreviewCard = tv({
+	slots: {
+		root: ["relative flex w-full items-start gap-3 border-2 p-3 text-left transition-colors"],
+		content: ["min-w-0 flex-1"],
+		meta: ["mb-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-xs leading-4"],
+		channel: ["font-bold"],
+		author: ["inline-flex min-w-0 items-center gap-1 font-bold"],
+		authorName: ["truncate"],
+		authorSubtitle: ["font-mono text-[10px]"],
+		timestamp: ["font-mono text-xs leading-4"],
+		preview: ["text-sm"],
+		previewLeading: ["mr-1 inline-flex align-[-1px]", "[&_svg]:size-[13px] [&_svg]:shrink-0"],
+		previewAuthor: ["font-bold"],
+		secondaryPreview: ["mt-1 line-clamp-1 text-xs"],
+		footer: ["mt-1 flex items-center gap-3"],
+		action: ["shrink-0"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: [
+					"border-line-subtle bg-layer-panel hover:border-line-strong hover:shadow-sm",
+					"data-[state=active]:border-line-strong data-[state=active]:bg-layer-panel data-[state=active]:shadow-sm",
+					"data-[highlighted=true]:border-line-strong data-[highlighted=true]:bg-info-base/25 data-[highlighted=true]:shadow-md"
+				],
+				channel: "text-foreground/50",
+				author: "text-foreground-strong",
+				authorSubtitle: "text-foreground/40",
+				timestamp: "text-foreground/40",
+				previewAuthor: "text-foreground/70",
+				secondaryPreview: "text-foreground/45"
+			},
+			elegant: {}
+		},
+		interactive: {
+			true: { root: "active:border-line-strong active:shadow-sm" },
+			false: { root: "cursor-default" }
+		}
+	},
+	defaultVariants: { interactive: false }
+});
+function ConversationPreviewCard({ onClick, className, render, testId, ...props }) {
+	const theme = useThemeFamily();
+	const interactive = Boolean(onClick);
+	const { root } = conversationPreviewCard({
+		theme,
+		interactive
+	});
+	const defaultProps = {
+		onClick,
+		"data-slot": "conversation-preview-card",
+		"data-testid": testId,
+		className: root({ className })
+	};
+	return useRender({
+		render: render ?? (interactive ? /* @__PURE__ */ jsx(Button, { type: "button" }) : /* @__PURE__ */ jsx("div", {})),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ConversationPreviewCardContent({ className, render, ...props }) {
+	const { content } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props)
+	});
+}
+function ConversationPreviewCardMeta({ className, render, ...props }) {
+	const { meta } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: meta({ className }) }, props)
+	});
+}
+function ConversationPreviewCardChannel({ className, render, ...props }) {
+	const { channel } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: channel({ className }) }, props)
+	});
+}
+function ConversationPreviewCardAuthor({ className, render, ...props }) {
+	const { author } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: author({ className }) }, props)
+	});
+}
+function ConversationPreviewCardAuthorName({ className, render, ...props }) {
+	const { authorName } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorName({ className }) }, props)
+	});
+}
+function ConversationPreviewCardAuthorSubtitle({ className, render, ...props }) {
+	const { authorSubtitle } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: authorSubtitle({ className }) }, props)
+	});
+}
+function ConversationPreviewCardTimestamp({ className, render, ...props }) {
+	const { timestamp } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: timestamp({ className }) }, props)
+	});
+}
+function ConversationPreviewCardPreview({ className, render, ...props }) {
+	const { preview } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: preview({ className }) }, props)
+	});
+}
+function ConversationPreviewCardPreviewLeading({ className, render, ...props }) {
+	const { previewLeading } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: previewLeading({ className }) }, props)
+	});
+}
+function ConversationPreviewCardPreviewAuthor({ className, render, ...props }) {
+	const { previewAuthor } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: previewAuthor({ className }) }, props)
+	});
+}
+function ConversationPreviewCardSecondaryPreview({ className, render, ...props }) {
+	const { secondaryPreview } = conversationPreviewCard({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "p",
+		render,
+		props: mergeProps({ className: secondaryPreview({ className }) }, props)
+	});
+}
+function ConversationPreviewCardFooter({ className, render, ...props }) {
+	const { footer } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: footer({ className }) }, props)
+	});
+}
+function ConversationPreviewCardAction({ className, render, ...props }) {
+	const { action } = conversationPreviewCard();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: action({ className }) }, props)
+	});
+}
+//#endregion
+//#region src/components/section-label/section-label.tsx
+const sectionLabel = tv({
+	slots: { root: ["text-xs font-bold uppercase tracking-widest"] },
+	variants: { theme: {
+		brutal: { root: "text-foreground/60" },
+		elegant: {}
+	} }
+});
+function SectionLabel({ className, render, ...props }) {
+	const { root } = sectionLabel({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "section-label" }
+	});
+}
+//#endregion
+//#region src/components/section-header/section-header.tsx
+const sectionHeader = tv({
+	slots: {
+		root: ["flex items-center justify-between gap-2"],
+		content: ["flex min-w-0 items-center gap-2"],
+		icon: ["shrink-0 text-foreground/60", "[&_svg]:size-4 [&_svg]:shrink-0"],
+		count: ["ml-2 font-mono text-foreground/40"],
+		actions: ["flex shrink-0 items-center gap-1.5"]
+	},
+	variants: { theme: {
+		brutal: {},
+		elegant: {}
+	} }
+});
+function SectionHeader({ className, render, ...props }) {
+	const { root } = sectionHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "section-header" }
+	});
+}
+function SectionHeaderContent({ className, render, ...props }) {
+	const { content } = sectionHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: content({ className }) }, props),
+		state: { slot: "section-header-content" }
+	});
+}
+function SectionHeaderIcon({ className, render, ...props }) {
+	const { icon } = sectionHeader();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: icon({ className }) }, props),
+		state: { slot: "section-header-icon" }
+	});
+}
+function SectionHeaderTitle({ render, ...props }) {
+	return /* @__PURE__ */ jsx(SectionLabel, {
+		render: render ?? /* @__PURE__ */ jsx("div", {}),
+		...props,
+		"data-slot": "section-header-title"
+	});
+}
+function SectionHeaderCount({ className, render, ...props }) {
+	const { count } = sectionHeader();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: count({ className }) }, props),
+		state: { slot: "section-header-count" }
+	});
+}
+function SectionHeaderActions({ className, render, ...props }) {
+	const { actions } = sectionHeader();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actions({ className }) }, props),
+		state: { slot: "section-header-actions" }
+	});
+}
+//#endregion
+//#region src/components/description-list/description-list.tsx
+const descriptionList = tv({
+	slots: {
+		root: ["m-0"],
+		item: [""],
+		term: ["mb-1 flex items-center gap-2 text-xs"],
+		details: ["m-0 text-sm"],
+		action: ["inline-flex shrink-0 items-center", "[&_svg]:size-3 [&_svg]:shrink-0"]
+	},
+	variants: { theme: {
+		brutal: {
+			term: "text-foreground/50",
+			details: "text-foreground-strong"
+		},
+		elegant: {}
+	} }
+});
+function DescriptionList({ className, render, ...props }) {
+	const { root } = descriptionList();
+	return useRender({
+		defaultTagName: "dl",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "description-list" }
+	});
+}
+function DescriptionItem({ className, render, ...props }) {
+	const { item } = descriptionList();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: item({ className }) }, props),
+		state: { slot: "description-item" }
+	});
+}
+function DescriptionTerm({ className, render, ...props }) {
+	const { term } = descriptionList({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "dt",
+		render,
+		props: mergeProps({ className: term({ className }) }, props),
+		state: { slot: "description-term" }
+	});
+}
+function DescriptionDetails({ className, render, ...props }) {
+	const { details } = descriptionList({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "dd",
+		render,
+		props: mergeProps({ className: details({ className }) }, props),
+		state: { slot: "description-details" }
+	});
+}
+function DescriptionAction({ className, render, ...props }) {
+	const { action } = descriptionList();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: action({ className }) }, props),
+		state: { slot: "description-action" }
+	});
+}
+//#endregion
+//#region src/components/lightbox/lightbox.tsx
+const lightbox = tv({
+	slots: {
+		backdrop: ["fixed inset-0 z-[70] bg-layer-backdrop data-[closed]:hidden"],
+		content: ["pointer-events-none fixed inset-0 z-[71] data-[closed]:hidden"],
+		header: ["safe-top safe-left safe-right pointer-events-auto shrink-0"],
+		title: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
+		actions: ["flex shrink-0 items-center gap-1.5"],
+		stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
+		media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-2"],
+		close: []
+	},
+	variants: { theme: {
+		brutal: {
+			header: ["border-b-2 border-line-strong bg-layer-panel"],
+			title: ["text-foreground-strong"],
+			media: ["border-line-strong bg-layer-panel shadow-xl"]
+		},
+		elegant: {}
+	} }
+});
+function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
+	const dialogRef = useRef(null);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const effectiveOpen = open ?? uncontrolledOpen;
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [onOpenChange, open]);
+	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		actionsRef: dialogRef,
+		defaultOpen,
+		modal,
+		onOpenChange: handleOpenChange,
+		open,
+		...props,
+		children: [modWClose, children]
+	});
+}
+function LightboxModWClose({ dialogRef }) {
+	useHotkey("Mod+W", (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dialogRef.current?.close();
+	}, { meta: {
+		name: "Close lightbox",
+		description: "Close the active lightbox before the browser closes the tab."
+	} });
+	return null;
+}
+function LightboxTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "lightbox-trigger",
+		...props
+	});
+}
+function LightboxPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "lightbox-portal",
+		...props
+	});
+}
+function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
+	const { backdrop, content } = lightbox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "lightbox-backdrop",
+		className: backdrop()
+	}), /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "lightbox-content",
+		initialFocus,
+		finalFocus,
+		className: content({ className }),
+		...props
+	})] });
+}
+function LightboxHeader({ render, className, ...props }) {
+	const { header } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "lightbox-header" }
+	});
+}
+function LightboxTitle({ render, className, ...props }) {
+	const { title } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "lightbox-title" }
+	});
+}
+function LightboxActions({ render, className, ...props }) {
+	const { actions } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: actions({ className }) }, props),
+		state: { slot: "lightbox-actions" }
+	});
+}
+function LightboxStage({ render, className, ...props }) {
+	const { stage } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: stage({ className }) }, props),
+		state: { slot: "lightbox-stage" }
+	});
+}
+function LightboxMedia({ render, className, ...props }) {
+	const { media } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: media({ className }) }, props),
+		state: { slot: "lightbox-media" }
+	});
+}
+function LightboxClose({ className, ...props }) {
+	const { close } = lightbox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "lightbox-close",
+		className: close({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/bottom-sheet/bottom-sheet.tsx
+const bottomSheet = tv({
+	slots: {
+		content: ["fixed inset-x-3 bottom-[max(12px,env(safe-area-inset-bottom))] z-50 mx-auto max-w-md"],
+		header: ["flex flex-col gap-1 p-4"],
+		footer: ["mt-auto flex flex-col gap-2 p-4"],
+		title: ["text-base font-bold text-foreground-strong"],
+		description: ["text-sm text-foreground/60"]
+	},
+	variants: { theme: {
+		brutal: { content: ["border-2 border-line-strong bg-layer-panel shadow-xl"] },
+		elegant: {}
+	} }
+});
+function BottomSheet(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function BottomSheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "bottom-sheet-trigger",
+		...props
+	});
+}
+function BottomSheetPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "bottom-sheet-portal",
+		...props
+	});
+}
+function BottomSheetContent({ className, ...props }) {
+	const { content } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(BottomSheetPortal, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "bottom-sheet-content",
+		"data-side": "bottom",
+		className: content({ className }),
+		...props
+	}) });
+}
+function BottomSheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "bottom-sheet-close",
+		...props
+	});
+}
+function BottomSheetHeader({ className, render, ...props }) {
+	const { header } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "bottom-sheet-header" }
+	});
+}
+function BottomSheetFooter({ className, render, ...props }) {
+	const { footer } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: footer({ className }) }, props),
+		state: { slot: "bottom-sheet-footer" }
+	});
+}
+function BottomSheetTitle({ className, ...props }) {
+	const { title } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "bottom-sheet-title",
+		className: title({ className }),
+		...props
+	});
+}
+function BottomSheetDescription({ className, ...props }) {
+	const { description } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "bottom-sheet-description",
+		className: description({ className }),
+		...props
+	});
+}
+//#endregion
+export { BottomSheet, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxMedia, LightboxPortal, LightboxStage, LightboxTitle, LightboxTrigger, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, Text, TextHeading, TextMono, TextSans, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };