@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/conversation-panel/conversation-panel-empty-state.mjs

@@ -0,0 +1,57 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/conversation-panel/conversation-panel-empty-state.tsx
+const conversationPanelEmptyState = tv({ slots: {
+	root: [
+		"flex h-full min-h-0 min-w-0 flex-1 flex-col items-center justify-center",
+		"text-center",
+		"gap-2 px-5 py-6",
+		"font-sans text-headline font-bold normal-case text-foreground-muted"
+	],
+	brand: ["shrink-0", "mb-1 inline-flex rounded-none p-0 text-foreground-hint"],
+	brandMark: [
+		"relative flex items-center justify-center",
+		"[&>svg]:relative [&>svg]:z-10",
+		"size-9 overflow-visible rounded-none",
+		"[&>svg]:size-9 [&>svg]:stroke-2"
+	]
+} });
+function ConversationPanelEmptyState({ className, render, ...props }) {
+	const { root } = conversationPanelEmptyState();
+	const defaultProps = {
+		"data-slot": "conversation-panel-empty-state",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ConversationPanelEmptyStateBrand({ className, render, ...props }) {
+	const { brand } = conversationPanelEmptyState();
+	const defaultProps = {
+		"data-slot": "conversation-panel-empty-state-brand",
+		className: brand({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ConversationPanelEmptyStateBrandMark({ className, render, ...props }) {
+	const { brandMark } = conversationPanelEmptyState();
+	const defaultProps = {
+		"data-slot": "conversation-panel-empty-state-brand-mark",
+		className: brandMark({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ConversationPanelEmptyState, ConversationPanelEmptyStateBrand, ConversationPanelEmptyStateBrandMark };

package/dist/components/conversation-panel/conversation-panel.d.mts

@@ -0,0 +1,20 @@
+import { PanelEdge } from "../panel/panel.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/conversation-panel/conversation-panel.d.ts
+export type ConversationPanelRootProps = useRender.ComponentProps<"section"> & {
+  edge?: PanelEdge;
+};
+export declare function ConversationPanelRoot({ className, edge, render, ...props }: ConversationPanelRootProps): import("react").JSX.Element;
+export type ConversationPanelContentProps = useRender.ComponentProps<"div">;
+/**
+ * Content region below the conversation header: one container hosting tabs,
+ * body, and footer.
+ */
+export declare function ConversationPanelContent({ className, render, ...props }: ConversationPanelContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ConversationPanelBodyProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelBody({ className, render, ...props }: ConversationPanelBodyProps): import("react").JSX.Element;
+export type ConversationPanelTabsProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelTabs({ className, render, ...props }: ConversationPanelTabsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ConversationPanelFooterProps = useRender.ComponentProps<"div">;
+export declare function ConversationPanelFooter({ className, render, ...props }: ConversationPanelFooterProps): import("react").JSX.Element;
+//#endregion

package/dist/components/conversation-panel/conversation-panel.mjs

@@ -0,0 +1,63 @@
+import { Panel, PanelBody, PanelFooter } from "../panel/panel.mjs";
+import { conversationPanel } from "./conversation-panel.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/conversation-panel/conversation-panel.tsx
+function ConversationPanelRoot({ className, edge = "inset", render, ...props }) {
+	const { root } = conversationPanel();
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		render,
+		edge,
+		"data-slot": "conversation-panel-root",
+		className: root({ className })
+	});
+}
+/**
+* Content region below the conversation header: one container hosting tabs,
+* body, and footer.
+*/
+function ConversationPanelContent({ className, render, ...props }) {
+	const { content } = conversationPanel();
+	const defaultProps = {
+		"data-slot": "conversation-panel-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ConversationPanelBody({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(PanelBody, {
+		...props,
+		render,
+		"data-slot": "conversation-panel-body",
+		className
+	});
+}
+function ConversationPanelTabs({ className, render, ...props }) {
+	const { tabs } = conversationPanel();
+	const defaultProps = {
+		"data-slot": "conversation-panel-tabs",
+		className: tabs({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function ConversationPanelFooter({ className, render, ...props }) {
+	const { footer } = conversationPanel();
+	return /* @__PURE__ */ jsx(PanelFooter, {
+		...props,
+		render,
+		"data-slot": "conversation-panel-footer",
+		className: footer({ className })
+	});
+}
+//#endregion
+export { ConversationPanelBody, ConversationPanelContent, ConversationPanelFooter, ConversationPanelRoot, ConversationPanelTabs };

package/dist/components/conversation-panel/conversation-panel.recipe.mjs

@@ -0,0 +1,15 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/conversation-panel/conversation-panel.recipe.ts
+const conversationPanel = tv({ slots: {
+	root: ["flex h-full min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas font-sans text-foreground"],
+	content: ["flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas"],
+	tabs: [
+		"shrink-0",
+		"border-b border-line-seam bg-layer-canvas",
+		"*:data-[slot=tabs-list]:w-full *:data-[slot=tabs-list]:px-5 max-md:*:data-[slot=tabs-list]:px-4",
+		"*:data-[slot=tabs-list]:data-[variant=default]:py-2"
+	],
+	footer: ["pt-0", "bg-layer-canvas"]
+} });
+//#endregion
+export { conversationPanel };

package/dist/components/conversation-panel/index.d.mts

@@ -0,0 +1,3 @@
+import { ConversationPanelBody, ConversationPanelBodyProps, ConversationPanelContent, ConversationPanelContentProps, ConversationPanelFooter, ConversationPanelFooterProps, ConversationPanelRoot, ConversationPanelRootProps, ConversationPanelTabs, ConversationPanelTabsProps } from "./conversation-panel.mjs";
+import { ConversationPanelEmptyState, ConversationPanelEmptyStateBrand, ConversationPanelEmptyStateBrandMark, ConversationPanelEmptyStateBrandMarkProps, ConversationPanelEmptyStateBrandProps, ConversationPanelEmptyStateProps } from "./conversation-panel-empty-state.mjs";
+export { ConversationPanelBody, type ConversationPanelBodyProps, ConversationPanelContent, type ConversationPanelContentProps, ConversationPanelEmptyState, ConversationPanelEmptyStateBrand, ConversationPanelEmptyStateBrandMark, type ConversationPanelEmptyStateBrandMarkProps, type ConversationPanelEmptyStateBrandProps, type ConversationPanelEmptyStateProps, ConversationPanelFooter, type ConversationPanelFooterProps, ConversationPanelRoot, type ConversationPanelRootProps, ConversationPanelTabs, type ConversationPanelTabsProps };

package/dist/components/copyable-code/copyable-code.d.mts

@@ -0,0 +1,72 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/copyable-code/copyable-code.d.ts
+declare const copyableCode: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    sm: {
+      code: string[];
+    };
+    md: {
+      code: string[];
+    };
+  };
+}, {
+  root: string[];
+  code: string[];
+  codeInner: string[];
+  action: string[];
+  iconSwap: string[];
+}, undefined, {
+  size: {
+    sm: {
+      code: string[];
+    };
+    md: {
+      code: string[];
+    };
+  };
+}, {
+  root: string[];
+  code: string[];
+  codeInner: string[];
+  action: string[];
+  iconSwap: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    sm: {
+      code: string[];
+    };
+    md: {
+      code: string[];
+    };
+  };
+}, {
+  root: string[];
+  code: string[];
+  codeInner: string[];
+  action: string[];
+  iconSwap: string[];
+}>>;
+export type CopyableCodeRootProps = Omit<ComponentPropsWithRef<"div">, "onCopy" | "onError"> & Pick<VariantProps<typeof copyableCode>, "size"> & {
+  copied?: boolean;
+  /** Called with the copied text only after a write that actually landed. */
+  onCopy?: (value: string) => void | Promise<void>;
+  /** Called when every copy strategy failed, so the consumer can tell the user. */
+  onError?: (error: Error) => void;
+};
+export declare function CopyableCodeRoot({ copied, onCopy, onError, size, className, ...props }: CopyableCodeRootProps): import("react").JSX.Element;
+export type CopyableCodeProps = ComponentPropsWithRef<"code"> & {
+  truncate?: boolean;
+};
+export declare function CopyableCode({ children, className, truncate, ...props }: CopyableCodeProps): import("react").JSX.Element;
+export type CopyableCodeActionProps = Omit<ButtonProps, "children" | "className"> & {
+  buttonClassName?: string;
+  className?: string;
+  children?: ReactNode | ((state: {
+    copied: boolean;
+  }) => ReactNode);
+};
+export declare function CopyableCodeAction({ children, buttonClassName, className, onClick, size, variant, ...props }: CopyableCodeActionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/copyable-code/copyable-code.mjs

@@ -0,0 +1,153 @@
+"use client";
+import { tv } from "../../lib/tv.mjs";
+import { Button } from "../button/button.mjs";
+import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard.mjs";
+import { Check, Copy } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copyable-code/copyable-code.tsx
+const copyableCode = tv({
+	slots: {
+		root: ["group/copyable-code flex w-full min-w-0 items-center gap-2"],
+		code: [
+			"min-w-0 flex-1 font-mono",
+			"rounded-control border border-line-hairline bg-layer-code",
+			"text-mono-code text-foreground"
+		],
+		codeInner: ["block w-full min-w-0 max-w-full break-all"],
+		action: [
+			"shrink-0",
+			"**:data-[slot=button]:transition-[color,background-color,box-shadow]",
+			"**:data-[slot=button]:duration-150 [&_[data-slot=button]]:ease-out"
+		],
+		iconSwap: [
+			"relative inline-grid",
+			"**:data-[slot=copyable-code-icon]:col-start-1 **:data-[slot=copyable-code-icon]:row-start-1",
+			"**:data-[slot=copyable-code-icon]:origin-center",
+			"**:data-[slot=copyable-code-icon]:transition-[opacity,filter,scale]",
+			"**:data-[slot=copyable-code-icon]:duration-170",
+			"**:data-[slot=copyable-code-icon]:ease-[cubic-bezier(0.16,1,0.3,1)]",
+			"**:data-[slot=copyable-code-icon]:will-change-[opacity,filter,scale]",
+			"motion-reduce:**:data-[slot=copyable-code-icon]:transition-none",
+			"data-[state=idle]:**:data-[icon=copy]:scale-100 data-[state=idle]:**:data-[icon=copy]:opacity-100 data-[state=idle]:[&_[data-icon=copy]]:blur-0",
+			"data-[state=idle]:**:data-[icon=check]:scale-[0.72] data-[state=idle]:**:data-[icon=check]:opacity-0 data-[state=idle]:**:data-[icon=check]:blur-[1px]",
+			"data-[state=copied]:**:data-[icon=check]:scale-100 data-[state=copied]:**:data-[icon=check]:opacity-100 data-[state=copied]:[&_[data-icon=check]]:blur-0",
+			"data-[state=copied]:**:data-[icon=copy]:scale-[0.72] data-[state=copied]:**:data-[icon=copy]:opacity-0 data-[state=copied]:**:data-[icon=copy]:blur-[1px]",
+			"size-4",
+			"**:data-[slot=copyable-code-icon]:size-4 **:data-[slot=copyable-code-icon]:stroke-2"
+		]
+	},
+	variants: { size: {
+		sm: { code: ["px-3 leading-5", "py-[5px]"] },
+		md: { code: ["px-3 leading-5", "min-h-10 py-[9px]"] }
+	} },
+	defaultVariants: { size: "md" }
+});
+const CopyableCodeContext = createContext(null);
+function useCopyableCode(part) {
+	const context = useContext(CopyableCodeContext);
+	if (!context) throw new Error(`${part} must be used inside CopyableCodeRoot.`);
+	return context;
+}
+function CopyableCodeRoot({ copied, onCopy, onError, size = "md", className, ...props }) {
+	const { root } = copyableCode({ size });
+	const { copied: clipboardCopied, copyText } = useCopyToClipboard({ timeout: 1400 });
+	const effectiveCopied = copied ?? clipboardCopied;
+	const copyValue = useCallback(async (value) => {
+		try {
+			await copyText(value);
+		} catch (error) {
+			onError?.(error instanceof Error ? error : new Error(String(error)));
+			return;
+		}
+		await onCopy?.(value);
+	}, [
+		copyText,
+		onCopy,
+		onError
+	]);
+	const context = useMemo(() => ({
+		copied: effectiveCopied,
+		copyValue,
+		size
+	}), [
+		copyValue,
+		effectiveCopied,
+		size
+	]);
+	return /* @__PURE__ */ jsx(CopyableCodeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "copyable-code-root",
+			"data-size": size,
+			"data-state": effectiveCopied ? "copied" : "idle",
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function CopyableCode({ children, className, truncate, ...props }) {
+	const { size } = useCopyableCode("CopyableCode");
+	const { code, codeInner } = copyableCode({ size });
+	const scrollClassName = "overflow-x-auto overflow-y-hidden break-normal whitespace-nowrap text-clip [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "copyable-code",
+		"data-truncate": truncate ? "true" : void 0,
+		className: code({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "copyable-code-inner",
+			className: codeInner({ className: [truncate && scrollClassName] }),
+			children
+		})
+	});
+}
+function CopyableCodeAction({ children, buttonClassName, className, onClick, size, variant, ...props }) {
+	const { copied, copyValue } = useCopyableCode("CopyableCodeAction");
+	const { action } = copyableCode();
+	const accessibleLabel = copied ? "Copied code" : "Copy code";
+	const buttonSize = size ?? "icon-md";
+	const buttonVariant = variant ?? "ghost";
+	const handleClick = useCallback(async (event) => {
+		const value = event.currentTarget.closest("[data-slot=\"copyable-code-root\"]")?.querySelector("[data-slot=\"copyable-code\"]")?.textContent ?? "";
+		await copyValue(value);
+		onClick?.(event);
+	}, [copyValue, onClick]);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "copyable-code-action",
+		className: action({ className }),
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: buttonVariant,
+			size: buttonSize,
+			"aria-label": props["aria-label"] ?? accessibleLabel,
+			"aria-live": "polite",
+			onClick: handleClick,
+			className: buttonClassName,
+			...props,
+			children: typeof children === "function" ? children({ copied }) : children ?? /* @__PURE__ */ jsx(CopyableCodeActionIcon, { copied })
+		})
+	});
+}
+function CopyableCodeActionIcon({ copied }) {
+	const { iconSwap } = copyableCode();
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "copyable-code-icon-swap",
+		"data-state": copied ? "copied" : "idle",
+		className: iconSwap(),
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx(Copy, {
+			"data-slot": "copyable-code-icon",
+			"data-icon": "copy",
+			className: "size-3",
+			strokeWidth: 1.75
+		}), /* @__PURE__ */ jsx(Check, {
+			"data-slot": "copyable-code-icon",
+			"data-icon": "check",
+			className: "size-3",
+			strokeWidth: 1.75
+		})]
+	});
+}
+//#endregion
+export { CopyableCode, CopyableCodeAction, CopyableCodeRoot };

package/dist/components/copyable-code/index.d.mts

@@ -0,0 +1,2 @@
+import { CopyableCode, CopyableCodeAction, CopyableCodeActionProps, CopyableCodeProps, CopyableCodeRoot, CopyableCodeRootProps } from "./copyable-code.mjs";
+export { CopyableCode, CopyableCodeAction, type CopyableCodeActionProps, type CopyableCodeProps, CopyableCodeRoot, type CopyableCodeRootProps };

package/dist/components/description-list/description-list.d.mts

@@ -0,0 +1,59 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/description-list/description-list.d.ts
+declare const descriptionList: import("tailwind-variants/lite").TVReturnType<{
+  direction: {
+    vertical: {};
+    horizontal: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  term: string[];
+  details: string[];
+}, undefined, {
+  direction: {
+    vertical: {};
+    horizontal: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  term: string[];
+  details: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  direction: {
+    vertical: {};
+    horizontal: {
+      root: string[];
+    };
+    inline: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  term: string[];
+  details: string[];
+}>>;
+export type DescriptionListDirection = NonNullable<VariantProps<typeof descriptionList>["direction"]>;
+export type DescriptionListProps = useRender.ComponentProps<"dl"> & Pick<VariantProps<typeof descriptionList>, "direction">;
+export declare function DescriptionList({ direction, className, render, ...props }: DescriptionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DescriptionItemProps = useRender.ComponentProps<"div">;
+export declare function DescriptionItem({ className, render, ...props }: DescriptionItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DescriptionTermProps = useRender.ComponentProps<"dt">;
+export declare function DescriptionTerm({ className, render, ...props }: DescriptionTermProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DescriptionDetailsProps = useRender.ComponentProps<"dd">;
+export declare function DescriptionDetails({ className, render, ...props }: DescriptionDetailsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/description-list/description-list.mjs

@@ -0,0 +1,96 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/description-list/description-list.tsx
+const descriptionList = tv({
+	slots: {
+		root: ["m-0"],
+		item: ["", "[&+&]:pt-2"],
+		term: [
+			"flex items-center",
+			"*:data-[slot=button]:ml-[-5px]",
+			"mb-0 gap-1.5",
+			"font-sans text-footnote font-medium text-foreground-hint"
+		],
+		details: [
+			"m-0",
+			"flex min-h-7 min-w-0 flex-wrap items-center gap-1.5",
+			"font-sans text-callout text-foreground"
+		]
+	},
+	variants: { direction: {
+		vertical: {},
+		horizontal: { root: [
+			"@container/description-list w-full grid items-baseline",
+			"[&>[data-slot=description-item]>*]:@max-sm/description-list:col-span-full",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:@max-sm/description-list:min-h-0",
+			"[&>[data-slot=description-item]+[data-slot=description-item]>[data-slot=description-term]]:@max-sm/description-list:mt-2",
+			"*:data-[slot=description-item]:contents",
+			"[&>[data-slot=description-item]>[data-slot=description-term]]:mb-0",
+			"[&>[data-slot=description-item]>[data-slot=description-term]]:max-w-40",
+			"[&>[data-slot=description-item]>[data-slot=description-term]]:min-w-0",
+			"[&>[data-slot=description-item]>[data-slot=description-term]]:wrap-break-word",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-w-0",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:wrap-break-word",
+			"grid-cols-[minmax(88px,max-content)_minmax(0,1fr)] gap-x-4 gap-y-0.5",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-h-8"
+		] },
+		inline: { root: [
+			"flex flex-wrap items-baseline gap-x-6 gap-y-2",
+			"*:data-[slot=description-item]:flex *:data-[slot=description-item]:min-w-0 *:data-[slot=description-item]:items-baseline *:data-[slot=description-item]:gap-3",
+			"*:data-[slot=description-item]:max-w-[min(100%,24rem)]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]]:min-w-0",
+			"[&>[data-slot=description-item]+[data-slot=description-item]]:pt-0",
+			"[&>[data-slot=description-item]>[data-slot=description-term]]:shrink-0",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=badge]:first-child]:-ml-1.5",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=badge]:first-child]:max-w-[calc(100%+6px)]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=task-chip],[data-slot=task-status-badge]):first-child]:ml-[-7px]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>:is([data-slot=task-chip],[data-slot=task-status-badge]):first-child]:max-w-[calc(100%+7px)]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=button]:first-child]:ml-[-7.5px]",
+			"[&>[data-slot=description-item]>[data-slot=description-details]>[data-slot=button]:first-child]:px-1.5"
+		] }
+	} },
+	defaultVariants: { direction: "vertical" }
+});
+function DescriptionList({ direction = "vertical", className, render, ...props }) {
+	const { root } = descriptionList({ direction });
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "dl",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "description-list" }
+	});
+}
+function DescriptionItem({ className, render, ...props }) {
+	const { item } = descriptionList();
+	const defaultProps = { className: item({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "description-item" }
+	});
+}
+function DescriptionTerm({ className, render, ...props }) {
+	const { term } = descriptionList();
+	const defaultProps = { className: term({ className }) };
+	return useRender({
+		defaultTagName: "dt",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "description-term" }
+	});
+}
+function DescriptionDetails({ className, render, ...props }) {
+	const { details } = descriptionList();
+	const defaultProps = { className: details({ className }) };
+	return useRender({
+		defaultTagName: "dd",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "description-details" }
+	});
+}
+//#endregion
+export { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm };

package/dist/components/description-list/index.d.mts

@@ -0,0 +1,2 @@
+import { DescriptionDetails, DescriptionDetailsProps, DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListDirection, DescriptionListProps, DescriptionTerm, DescriptionTermProps } from "./description-list.mjs";
+export { DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListDirection, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps };

package/dist/components/dialog/dialog-sheet-context.mjs

@@ -0,0 +1,58 @@
+import { tv } from "../../lib/tv.mjs";
+import { createContext, createElement, useContext } from "react";
+//#region src/components/dialog/dialog-sheet-context.ts
+const NO_SHEET = {
+	sheet: false,
+	commitSlot: null,
+	setCommitSlot: () => void 0,
+	bodyEndSlot: null,
+	setBodyEndSlot: () => void 0
+};
+const DialogSheetContext = createContext(NO_SHEET);
+function useDialogSheet() {
+	return useContext(DialogSheetContext);
+}
+/** Inside the sheet's head: its × is a pushed page's leading action. */
+const DialogSheetHeadContext = createContext(false);
+function useInDialogSheetHead() {
+	return useContext(DialogSheetHeadContext);
+}
+/**
+* Every overlay surface starts outside any sheet: a confirm, a dialog or a
+* drawer opened from inside a sheet keeps its own head, footer and commit
+* button instead of taking the sheet's.
+*/
+function DialogSheetReset({ children }) {
+	return createElement(DialogSheetContext.Provider, { value: NO_SHEET }, createElement(DialogSheetHeadContext.Provider, { value: false }, children));
+}
+/**
+* A dialog drawn as a phone sheet (design: dialog.md "On a phone"). The
+* surface is DialogContent's frame docked to the bottom, 90% of the screen
+* tall, rounded on its top corners, sliding up as a bottom sheet does; its
+* head is a pushed page's head (× at the start, the title, the commit button
+* at the end); its body keeps the phone's 16px margin and the home indicator's
+* inset. Merged over DialogContent's classes, so these win.
+*/
+const dialogSheet = tv({ slots: {
+	content: [
+		"fixed inset-x-0 top-auto bottom-0 left-0 h-[90dvh] max-h-none w-full max-w-none translate-none",
+		"rounded-none rounded-t-dialog",
+		"pr-[env(safe-area-inset-right,0px)] pl-[env(safe-area-inset-left,0px)]",
+		"transition-transform duration-240 ease-slide data-ending-style:duration-180",
+		"data-starting-style:translate-y-full data-ending-style:translate-y-full",
+		"motion-reduce:transition-none"
+	],
+	overlay: [
+		"transition-opacity duration-240 ease-slide data-ending-style:duration-180",
+		"data-starting-style:opacity-0 data-ending-style:opacity-0",
+		"motion-reduce:transition-none"
+	],
+	header: ["flex h-14 shrink-0 items-center gap-2 px-4 pt-0", "border-b border-line-seam"],
+	title: ["min-w-0 flex-1 truncate"],
+	commitSlot: ["flex shrink-0 items-center empty:hidden"],
+	body: ["min-h-0 content-start", "px-4 pt-4 first:pt-4 pb-[max(16px,env(safe-area-inset-bottom,0px))]"],
+	barBody: ["block overflow-y-auto"],
+	bodyEnd: ["mt-4 empty:hidden", "text-start font-sans text-footnote text-foreground-muted *:data-[slot=text-link]:text-footnote"]
+} });
+//#endregion
+export { DialogSheetContext, DialogSheetHeadContext, DialogSheetReset, NO_SHEET, dialogSheet, useDialogSheet, useInDialogSheetHead };

package/dist/components/dialog/dialog-sheet.d.mts

@@ -0,0 +1,31 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { DialogContentProps } from "./dialog.mjs";
+//#region src/components/dialog/dialog-sheet.d.ts
+export type DialogSheetContentProps = DialogContentProps;
+/**
+ * DialogContent for a dialog with several fields, a long list or steps. On a
+ * desktop and a tablet it is DialogContent, the same DOM and classes. Below
+ * 768px it is a sheet: docked to the bottom, 90% of the screen tall, sliding
+ * up over its scrim; `DialogHeader` becomes a pushed page's head (× at the
+ * start, the title, the `DialogCommit` button at the end), `DialogFooter` is
+ * hidden (× is Cancel) and `DialogBody` scrolls on the phone's 16px margin
+ * above the home indicator. Base UI keeps Esc, focus and close.
+ */
+export declare function DialogSheetContent({ className, overlay, style, ref, children, ...props }: DialogSheetContentProps): import("react").JSX.Element;
+export type DialogCommitProps = ButtonProps;
+/**
+ * The dialog's one commit button: a `Button`, written where it goes on a
+ * desktop (the end of `DialogFooter`). In a `DialogSheetContent` below 768px
+ * it is drawn at the end of the sheet's head instead, the same button (color,
+ * words, disabled and loading state) at `size="md"`. In a flow of steps, write
+ * each step's button as one (Next, then the last step's action).
+ *
+ * A submit button stays its form's default button in the head: it is tied to
+ * the form it was written in by the form's `id` (the `form` attribute), so a
+ * click and Enter in a field submit, and neither does while it is disabled.
+ * Give that form an `id`, or pass `form`. Without one a click still submits
+ * the form, but Enter in a field doesn't.
+ */
+export declare function DialogCommit({ size, form, onClick, ...props }: DialogCommitProps): import("react").JSX.Element;
+//#endregion