@ctrl-ui/react 0.8.0

package/dist/surface-variants.d.ts

@@ -0,0 +1,6 @@
+//#region src/surface-variants.d.ts
+declare const popupItemStructureClasses = "flex select-none items-center";
+declare const popupParts: readonly ["backdrop", "surface", "list-surface", "list-content", "bar", "item", "navigation-link", "label", "separator", "shortcut"];
+type PopupPart = (typeof popupParts)[number];
+//#endregion
+export { PopupPart, popupItemStructureClasses, popupParts };

package/dist/surface-variants.js

@@ -0,0 +1,16 @@
+//#region src/surface-variants.ts
+const popupItemStructureClasses = "flex select-none items-center";
+const popupParts = [
+	"backdrop",
+	"surface",
+	"list-surface",
+	"list-content",
+	"bar",
+	"item",
+	"navigation-link",
+	"label",
+	"separator",
+	"shortcut"
+];
+//#endregion
+export { popupItemStructureClasses, popupParts };

package/dist/task-list.d.ts

@@ -0,0 +1,34 @@
+import { CollapsibleProps } from "./ui/collapsible.js";
+import { TaskListKnobStyle } from "./knob-contracts/task-list-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/task-list.d.ts
+type TaskStatus = "pending" | "active" | "completed";
+type TaskListProps = Omit<CollapsibleProps, "style"> & {
+  style?: CSSProperties & TaskListKnobStyle;
+};
+type TaskListStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+declare function TaskList({ className, children, ...props }: TaskListProps): import("react").JSX.Element;
+type TaskListTriggerProps = TaskListStyleProps<ComponentProps<"button">, TaskListKnobStyle>;
+declare function TaskListTrigger({ className, children, ...props }: TaskListTriggerProps): import("react").JSX.Element;
+type TaskListProgressProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
+declare function TaskListProgress({ className, children, ...props }: TaskListProgressProps): import("react").JSX.Element;
+type TaskListLabelProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;
+declare function TaskListLabel({ className, children, ...props }: TaskListLabelProps): import("react").JSX.Element;
+type TaskListContentProps = ComponentProps<"ol"> & {
+  style?: CSSProperties & TaskListKnobStyle;
+};
+declare function TaskListContent({ className, children, ...props }: TaskListContentProps): import("react").JSX.Element;
+type TaskListItemProps = TaskListStyleProps<Omit<ComponentProps<"li">, "children">, TaskListKnobStyle> & {
+  label: string;
+  status?: TaskStatus;
+  children?: ReactNode;
+};
+declare function TaskListItem({ label, status, className, children, ...props }: TaskListItemProps): import("react").JSX.Element;
+type TaskListIndicatorProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle> & {
+  status?: TaskStatus;
+};
+declare function TaskListIndicator({ status, className, ...props }: TaskListIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { TaskList, TaskListContent, TaskListContentProps, TaskListIndicator, TaskListIndicatorProps, TaskListItem, TaskListItemProps, TaskListLabel, TaskListLabelProps, TaskListProgress, TaskListProgressProps, TaskListProps, TaskListTrigger, TaskListTriggerProps, TaskStatus };

package/dist/task-list.js

@@ -0,0 +1,177 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, CircleCheck, CircleDashed, Loader2 } from "lucide-react";
+//#region src/task-list.tsx
+const TaskListContext = createContext(null);
+const TaskListRegistrationContext = createContext(null);
+function useTaskListContext() {
+	const context = useContext(TaskListContext);
+	if (!context) throw new Error("TaskList compound components must be rendered inside <TaskList>.");
+	return context;
+}
+function useTaskListRegistrationContext() {
+	const context = useContext(TaskListRegistrationContext);
+	if (!context) throw new Error("TaskList items must be rendered inside <TaskList>.");
+	return context;
+}
+function upsert(entries, entry) {
+	const index = entries.findIndex((existing) => existing.key === entry.key);
+	if (index === -1) return [...entries, entry];
+	const next = [...entries];
+	next[index] = entry;
+	return next;
+}
+function currentTaskIndex(tasks) {
+	const active = tasks.findIndex((task) => task.status === "active");
+	if (active !== -1) return active;
+	const pending = tasks.findIndex((task) => task.status === "pending");
+	if (pending !== -1) return pending;
+	return tasks.length - 1;
+}
+function TaskList({ className, children, ...props }) {
+	const [tasks, setTasks] = useState([]);
+	const [registration] = useState(() => ({
+		registerTask(entry) {
+			setTasks((previous) => upsert(previous, entry));
+		},
+		unregisterTask(key) {
+			setTasks((previous) => previous.filter((task) => task.key !== key));
+		}
+	}));
+	const total = tasks.length;
+	const currentIndex = currentTaskIndex(tasks);
+	const current = tasks[currentIndex];
+	const allCompleted = total > 0 && tasks.every((task) => task.status === "completed");
+	return /* @__PURE__ */ jsx(TaskListRegistrationContext.Provider, {
+		value: registration,
+		children: /* @__PURE__ */ jsx(TaskListContext.Provider, {
+			value: {
+				total,
+				current,
+				currentNumber: total === 0 ? 0 : currentIndex + 1,
+				allCompleted
+			},
+			children: /* @__PURE__ */ jsx(Collapsible, {
+				"data-control-ui": "task-list",
+				"data-control-family": "task-list",
+				"data-slot": "root",
+				"data-surface": "panel",
+				className: cn("w-full overflow-hidden", className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function TaskListTrigger({ className, children, ...props }) {
+	const { allCompleted } = useTaskListContext();
+	return /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		"data-control-ui": "task-list",
+		"data-control-family": "task-list",
+		"data-slot": "trigger",
+		className: cn("flex w-full items-center", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(TaskListIndicator, { status: allCompleted ? "completed" : "active" }),
+			/* @__PURE__ */ jsx(TaskListProgress, {}),
+			/* @__PURE__ */ jsx(ChevronRight, {
+				"aria-hidden": "true",
+				"data-control-ui": "task-list",
+				"data-control-family": "task-list",
+				"data-slot": "chevron",
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ jsx(TaskListLabel, { className: "in-data-[state=open]:hidden" })
+		] })
+	});
+}
+function TaskListProgress({ className, children, ...props }) {
+	const { currentNumber, total } = useTaskListContext();
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "task-list",
+		"data-control-family": "task-list",
+		"data-slot": "progress",
+		className: cn("shrink-0", className),
+		...props,
+		children: children ?? `Task ${currentNumber} of ${total}`
+	});
+}
+function TaskListLabel({ className, children, ...props }) {
+	const { current } = useTaskListContext();
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "task-list",
+		"data-control-family": "task-list",
+		"data-slot": "label",
+		className: cn("min-w-0 flex-1 truncate", className),
+		...props,
+		children: children ?? current?.label
+	});
+}
+function TaskListContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		keepMounted: true,
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-control-ui": "task-list",
+			"data-control-family": "task-list",
+			"data-slot": "items",
+			className: cn("flex flex-col", className),
+			...props,
+			children
+		})
+	});
+}
+function TaskListItem({ label, status = "pending", className, children, ...props }) {
+	const { registerTask, unregisterTask } = useTaskListRegistrationContext();
+	const key = useId();
+	useEffect(() => registerTask({
+		key,
+		status,
+		label
+	}), [
+		registerTask,
+		key,
+		status,
+		label
+	]);
+	useEffect(() => () => unregisterTask(key), [unregisterTask, key]);
+	return /* @__PURE__ */ jsxs("li", {
+		"data-control-ui": "task-list",
+		"data-control-family": "task-list",
+		"data-slot": "item",
+		"data-status": status,
+		className: cn("flex items-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(TaskListIndicator, { status }), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 flex-1 truncate",
+			children: children ?? label
+		})]
+	});
+}
+const indicatorIcons = {
+	pending: CircleDashed,
+	active: Loader2,
+	completed: CircleCheck
+};
+function TaskListIndicator({ status = "pending", className, ...props }) {
+	const Icon = indicatorIcons[status];
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "task-list",
+		"data-control-family": "task-list",
+		"data-slot": "item-indicator",
+		"data-status": status,
+		className: cn("inline-flex shrink-0 items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-3.5"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: status
+		})]
+	});
+}
+//#endregion
+export { TaskList, TaskListContent, TaskListIndicator, TaskListItem, TaskListLabel, TaskListProgress, TaskListTrigger };

package/dist/thread-rail.d.ts

@@ -0,0 +1,52 @@
+import { ChatRole } from "./hooks/use-chat-message.js";
+import { ThreadRailKnobStyle } from "./knob-contracts/thread-rail-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/thread-rail.d.ts
+type ThreadRailProps = ComponentProps<"nav"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+type ThreadRailItemProps = Omit<ComponentProps<"div">, "style"> & {
+  from?: ChatRole;
+  inView?: boolean;
+  active?: boolean;
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRail({ className, children, style, ...props }: ThreadRailProps): import("react").JSX.Element;
+declare function ThreadRailItem({ from, inView, active, index, className, children, ...props }: ThreadRailItemProps & {
+  index?: number;
+}): import("react").JSX.Element;
+type ThreadRailLineProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailLine({ className, ...props }: ThreadRailLineProps): import("react").JSX.Element;
+type ThreadRailPopoverProps = Omit<ComponentProps<"div">, "style"> & {
+  children?: ReactNode;
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailPopover(_props: ThreadRailPopoverProps): null;
+type ThreadRailTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailTitle({ className, ...props }: ThreadRailTitleProps): import("react").JSX.Element;
+type ThreadRailSummaryProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailSummary({ className, ...props }: ThreadRailSummaryProps): import("react").JSX.Element;
+type ThreadRailFooterProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailFooter({ className, ...props }: ThreadRailFooterProps): import("react").JSX.Element;
+type ThreadRailFileProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailFile({ className, ...props }: ThreadRailFileProps): import("react").JSX.Element;
+type ThreadRailFileIconProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailFileIcon({ className, children, ...props }: ThreadRailFileIconProps): import("react").JSX.Element;
+type ThreadRailMoreProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & ThreadRailKnobStyle;
+};
+declare function ThreadRailMore({ className, ...props }: ThreadRailMoreProps): import("react").JSX.Element;
+//#endregion
+export { ThreadRail, ThreadRailFile, ThreadRailFileIcon, ThreadRailFileIconProps, ThreadRailFileProps, ThreadRailFooter, ThreadRailFooterProps, ThreadRailItem, ThreadRailItemProps, ThreadRailLine, ThreadRailLineProps, ThreadRailMore, ThreadRailMoreProps, ThreadRailPopover, ThreadRailPopoverProps, ThreadRailProps, ThreadRailSummary, ThreadRailSummaryProps, ThreadRailTitle, ThreadRailTitleProps };

package/dist/thread-rail.js

@@ -0,0 +1,190 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/thread-rail.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const RailContext = createContext(null);
+function useRail() {
+	const context = useContext(RailContext);
+	if (!context) throw new Error("ThreadRailItem must be rendered inside <ThreadRail>.");
+	return context;
+}
+const ItemContext = createContext(null);
+function useItem() {
+	const context = useContext(ItemContext);
+	if (!context) throw new Error("ThreadRail compound parts must be rendered inside <ThreadRailItem>.");
+	return context;
+}
+function ThreadRail({ className, children, style, ...props }) {
+	const [hovered, setHovered] = useState(0);
+	const cardRef = useRef(null);
+	const activeLayerRef = useRef(null);
+	const [cardHeight, setCardHeight] = useState();
+	const items = Children.toArray(children).filter((child) => isValidElement(child));
+	const popovers = items.map((item) => {
+		const popover = Children.toArray(item.props.children).find((child) => isValidElement(child) && child.type === ThreadRailPopover);
+		return isValidElement(popover) ? popover.props : void 0;
+	});
+	const activePopover = popovers[hovered];
+	useIsomorphicLayoutEffect(() => {
+		const card = cardRef.current;
+		const activeLayer = activeLayerRef.current;
+		if (!card || !activeLayer) return;
+		setCardHeight(activeLayer.offsetHeight + card.offsetHeight - card.clientHeight);
+	}, [hovered]);
+	const railStyle = {
+		...style,
+		"--aui-rail-active-index": hovered
+	};
+	return /* @__PURE__ */ jsx(RailContext.Provider, {
+		value: {
+			current: hovered,
+			activate: setHovered
+		},
+		children: /* @__PURE__ */ jsxs("nav", {
+			"data-control-ui": "thread-rail",
+			"data-control-family": "thread-rail",
+			"data-slot": "root",
+			"aria-label": "Conversation timeline",
+			style: railStyle,
+			className: cn("flex flex-col", className),
+			...props,
+			children: [items.map((item, index) => cloneElement(item, { index })), /* @__PURE__ */ jsx("div", {
+				ref: cardRef,
+				"data-control-ui": "thread-rail",
+				"data-control-family": "thread-rail",
+				"data-slot": "popover",
+				"data-surface": "floating",
+				style: {
+					...activePopover?.style,
+					height: cardHeight
+				},
+				className: cn("pointer-events-none z-20 w-72 overflow-hidden", activePopover?.className),
+				children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+					"data-control-ui": "thread-rail",
+					"data-control-family": "thread-rail",
+					"data-slot": "popover-layer",
+					ref: index === hovered ? activeLayerRef : void 0,
+					"data-active": index === hovered ? "true" : void 0,
+					className: "",
+					children: popovers[index]?.children ?? null
+				}, item.key ?? index))
+			})]
+		})
+	});
+}
+function ThreadRailItem({ from = "user", inView = false, active = false, index = -1, className, children, ...props }) {
+	const rail = useRail();
+	const isInView = inView || active;
+	return /* @__PURE__ */ jsx(ItemContext.Provider, {
+		value: {
+			index,
+			inView: isInView,
+			activate: rail.activate
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "thread-rail",
+			"data-control-family": "thread-rail",
+			"data-slot": "item",
+			"data-from": from,
+			"data-in-view": isInView ? "true" : void 0,
+			"data-active": isInView ? "true" : void 0,
+			"data-rail-current": index === rail.current ? "true" : void 0,
+			className: cn("relative flex items-center", className),
+			...props,
+			children
+		})
+	});
+}
+function ThreadRailLine({ className, ...props }) {
+	const { index, inView, activate } = useItem();
+	return /* @__PURE__ */ jsx("button", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "line",
+		type: "button",
+		"aria-current": inView ? "location" : void 0,
+		onMouseEnter: () => activate(index),
+		onFocus: () => activate(index),
+		className: cn("relative block cursor-pointer before:absolute before:-inset-y-1 before:inset-x-0 before:content-['']", className),
+		...props
+	});
+}
+function ThreadRailPopover(_props) {
+	return null;
+}
+function ThreadRailTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "title",
+		className: cn("truncate", className),
+		...props
+	});
+}
+function ThreadRailSummary({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "summary",
+		className: cn("line-clamp-3", className),
+		...props
+	});
+}
+function ThreadRailFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "footer",
+		className: cn("flex flex-wrap items-center", className),
+		...props
+	});
+}
+function ThreadRailFile({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "file",
+		className: cn("inline-flex max-w-[180px] items-center truncate", className),
+		...props
+	});
+}
+function ThreadRailFileIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "file-icon",
+		className: cn("inline-flex shrink-0 items-center justify-center", className),
+		"aria-hidden": true,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 16 16",
+			fill: "none",
+			className: "size-3",
+			role: "presentation",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M4 1.5h5L13 5.5V14a.5.5 0 0 1-.5.5h-8A.5.5 0 0 1 4 14V2a.5.5 0 0 1 .5-.5Z",
+				stroke: "currentColor",
+				strokeWidth: "1.1",
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M9 1.5V5.5h4",
+				stroke: "currentColor",
+				strokeWidth: "1.1",
+				strokeLinejoin: "round"
+			})]
+		})
+	});
+}
+function ThreadRailMore({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "thread-rail",
+		"data-control-family": "thread-rail",
+		"data-slot": "more",
+		className,
+		...props
+	});
+}
+//#endregion
+export { ThreadRail, ThreadRailFile, ThreadRailFileIcon, ThreadRailFooter, ThreadRailItem, ThreadRailLine, ThreadRailMore, ThreadRailPopover, ThreadRailSummary, ThreadRailTitle };

package/dist/transcript-divider.d.ts

@@ -0,0 +1,15 @@
+import { TranscriptDividerKnobStyle } from "./knob-contracts/transcript-divider-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/transcript-divider.d.ts
+type ChatTone = "neutral" | "success" | "warning" | "danger";
+type TranscriptDividerProps = Omit<ComponentProps<"div">, "style"> & {
+  tone?: ChatTone;
+  style?: CSSProperties & TranscriptDividerKnobStyle;
+};
+declare function TranscriptDivider({ tone, className, children, ...props }: TranscriptDividerProps): import("react").JSX.Element;
+type TranscriptDividerLabelProps = ComponentProps<"span"> & {
+  style?: CSSProperties & TranscriptDividerKnobStyle;
+};
+declare function TranscriptDividerLabel({ className, ...props }: TranscriptDividerLabelProps): import("react").JSX.Element;
+//#endregion
+export { ChatTone, TranscriptDivider, TranscriptDividerLabel, TranscriptDividerLabelProps, TranscriptDividerProps };

package/dist/transcript-divider.js

@@ -0,0 +1,25 @@
+import { cn } from "./lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/transcript-divider.tsx
+function TranscriptDivider({ tone = "neutral", className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "transcript-divider",
+		"data-control-family": "transcript-divider",
+		"data-slot": "root",
+		"data-tone": tone,
+		className: cn("flex min-w-0 items-center before:flex-1 after:flex-1", className),
+		...props,
+		children: children != null ? /* @__PURE__ */ jsx(TranscriptDividerLabel, { children }) : null
+	});
+}
+function TranscriptDividerLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "transcript-divider",
+		"data-control-family": "transcript-divider",
+		"data-slot": "label",
+		className: cn("min-w-0 truncate", className),
+		...props
+	});
+}
+//#endregion
+export { TranscriptDivider, TranscriptDividerLabel };

package/dist/ui/accordion.d.ts

@@ -0,0 +1,31 @@
+import { AccordionKnobStyle } from "../knob-contracts/accordion-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/accordion.d.ts
+type AccordionValue = (string | number)[];
+type AccordionProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  value?: AccordionValue;
+  defaultValue?: AccordionValue;
+  onValueChange?: (value: AccordionValue) => void;
+  multiple?: boolean;
+  disabled?: boolean;
+} & {
+  style?: CSSProperties & AccordionKnobStyle;
+};
+type AccordionItemProps = Omit<ComponentProps<"div"> & {
+  value?: string | number;
+  disabled?: boolean;
+}, "style"> & {
+  style?: CSSProperties & AccordionKnobStyle;
+};
+type AccordionTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & AccordionKnobStyle;
+};
+type AccordionPanelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AccordionKnobStyle;
+};
+declare function Accordion({ className, ...props }: AccordionProps): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+declare function AccordionPanel({ className, children, ...props }: AccordionPanelProps): import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionTrigger, AccordionTriggerProps, AccordionValue };

package/dist/ui/accordion.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+//#region src/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-control-ui": "accordion",
+		"data-control-family": "accordion",
+		"data-slot": "root",
+		className,
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-control-ui": "accordion",
+		"data-control-family": "accordion",
+		"data-slot": "item",
+		className,
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			"data-control-ui": "accordion",
+			"data-control-family": "accordion",
+			"data-slot": "trigger",
+			className: cn("group flex flex-1 cursor-pointer select-none items-center justify-between", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				"data-control-ui": "accordion",
+				"data-control-family": "accordion",
+				"data-slot": "icon",
+				className: "shrink-0"
+			})]
+		})
+	});
+}
+function AccordionPanel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		"data-control-ui": "accordion",
+		"data-control-family": "accordion",
+		"data-slot": "panel",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "accordion",
+			"data-control-family": "accordion",
+			"data-slot": "panel-content",
+			className,
+			children
+		})
+	});
+}
+//#endregion
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/ui/alert-dialog.d.ts

@@ -0,0 +1,36 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ButtonProps } from "./button.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/ui/alert-dialog.d.ts
+type AlertDialogProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type AlertDialogContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function AlertDialog(props: AlertDialogProps): import("react").JSX.Element;
+declare function AlertDialogTrigger({ className, ...props }: ComponentProps<typeof AlertDialog$1.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type AlertDialogCloseProps = Omit<ComponentProps<typeof AlertDialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
+declare function AlertDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: AlertDialogCloseProps): import("react").JSX.Element;
+declare function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: ComponentProps<"h2"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: ComponentProps<"p"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger };