@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/task-list.js

@@ -1,10 +1,16 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.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 taskStatusLabels = {
+	pending: "Pending",
+	active: "In progress",
+	completed: "Done"
+};
 const TaskListContext = createContext(null);
 const TaskListRegistrationContext = createContext(null);
 function useTaskListContext() {
@@ -31,7 +37,7 @@ function currentTaskIndex(tasks) {
 	if (pending !== -1) return pending;
 	return tasks.length - 1;
 }
-function TaskList({ className, children, ...props }) {
+function TaskList({ statusLabels, className, children, ...props }) {
 	const [tasks, setTasks] = useState([]);
 	const [registration] = useState(() => ({
 		registerTask(entry) {
@@ -45,6 +51,11 @@ function TaskList({ className, children, ...props }) {
 	const currentIndex = currentTaskIndex(tasks);
 	const current = tasks[currentIndex];
 	const allCompleted = total > 0 && tasks.every((task) => task.status === "completed");
+	const labels = {
+		...taskStatusLabels,
+		...statusLabels
+	};
+	const progressStatus = current?.status === "active" ? `${current.label}: ${labels.active}` : "";
 	return /* @__PURE__ */ jsx(TaskListRegistrationContext.Provider, {
 		value: registration,
 		children: /* @__PURE__ */ jsx(TaskListContext.Provider, {
@@ -52,16 +63,17 @@ function TaskList({ className, children, ...props }) {
 				total,
 				current,
 				currentNumber: total === 0 ? 0 : currentIndex + 1,
-				allCompleted
+				allCompleted,
+				statusLabels: labels
 			},
-			children: /* @__PURE__ */ jsx(Collapsible, {
+			children: /* @__PURE__ */ jsxs(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
+				children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: progressStatus })]
 			})
 		})
 	});
@@ -101,13 +113,15 @@ function TaskListProgress({ className, children, ...props }) {
 }
 function TaskListLabel({ className, children, ...props }) {
 	const { current } = useTaskListContext();
+	const text = children ?? current?.label;
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "task-list",
 		"data-control-family": "task-list",
 		"data-slot": "label",
+		title: typeof text === "string" ? text : void 0,
 		className: cn("min-w-0 flex-1 truncate", className),
 		...props,
-		children: children ?? current?.label
+		children: text
 	});
 }
 function TaskListContent({ className, children, ...props }) {
@@ -145,7 +159,7 @@ function TaskListItem({ label, status = "pending", className, children, ...props
 		className: cn("flex items-center", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(TaskListIndicator, { status }), /* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate",
+			className: "min-w-0 flex-1 text-pretty",
 			children: children ?? label
 		})]
 	});
@@ -157,6 +171,7 @@ const indicatorIcons = {
 };
 function TaskListIndicator({ status = "pending", className, ...props }) {
 	const Icon = indicatorIcons[status];
+	const statusLabels = useContext(TaskListContext)?.statusLabels ?? taskStatusLabels;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "task-list",
 		"data-control-family": "task-list",
@@ -166,12 +181,13 @@ function TaskListIndicator({ status = "pending", className, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
+			"data-motion-essential": status === "active" ? "" : void 0,
 			className: "size-3.5"
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: status
+			children: statusLabels[status]
 		})]
 	});
 }
 //#endregion
-export { TaskList, TaskListContent, TaskListIndicator, TaskListItem, TaskListLabel, TaskListProgress, TaskListTrigger };
+export { TaskList, TaskListContent, TaskListIndicator, TaskListItem, TaskListLabel, TaskListProgress, TaskListTrigger, taskStatusLabels };

package/dist/thread-rail.d.ts

@@ -18,7 +18,7 @@ export declare function ThreadRailItem({ from, inView, active, index, className,
 export type ThreadRailLineProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ThreadRailKnobStyle;
 };
-export declare function ThreadRailLine({ className, ...props }: ThreadRailLineProps): import("react").JSX.Element;
+export declare function ThreadRailLine({ className, onKeyDown, "aria-label": ariaLabel, ...props }: ThreadRailLineProps): import("react").JSX.Element;
 export type ThreadRailPopoverProps = Omit<ComponentProps<"div">, "style"> & {
   children?: ReactNode;
   style?: CSSProperties & ThreadRailKnobStyle;

package/dist/thread-rail.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/thread-rail.tsx
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
@@ -16,11 +16,14 @@ function useItem() {
 	if (!context) throw new Error("ThreadRail compound parts must be rendered inside <ThreadRailItem>.");
 	return context;
 }
+const LayerContext = createContext(null);
 function ThreadRail({ className, children, style, ...props }) {
 	const [hovered, setHovered] = useState(0);
 	const cardRef = useRef(null);
 	const activeLayerRef = useRef(null);
 	const [cardHeight, setCardHeight] = useState();
+	const baseId = useId();
+	const lines = useRef([]);
 	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);
@@ -40,7 +43,10 @@ function ThreadRail({ className, children, style, ...props }) {
 	return /* @__PURE__ */ jsx(RailContext.Provider, {
 		value: {
 			current: hovered,
-			activate: setHovered
+			count: items.length,
+			activate: setHovered,
+			layerId: (index, part) => `${baseId}-${index}-${part}`,
+			lines
 		},
 		children: /* @__PURE__ */ jsxs("nav", {
 			"data-control-ui": "thread-rail",
@@ -52,6 +58,7 @@ function ThreadRail({ className, children, style, ...props }) {
 			...props,
 			children: [items.map((item, index) => cloneElement(item, { index })), /* @__PURE__ */ jsx("div", {
 				ref: cardRef,
+				"aria-hidden": "true",
 				"data-control-ui": "thread-rail",
 				"data-control-family": "thread-rail",
 				"data-slot": "popover",
@@ -61,14 +68,16 @@ function ThreadRail({ className, children, style, ...props }) {
 					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
+				children: items.map((item, index) => /* @__PURE__ */ jsx(LayerContext.Provider, {
+					value: index,
+					children: /* @__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,
+						children: popovers[index]?.children ?? null
+					})
 				}, item.key ?? index))
 			})]
 		})
@@ -81,7 +90,7 @@ function ThreadRailItem({ from = "user", inView = false, active = false, index =
 		value: {
 			index,
 			inView: isInView,
-			activate: rail.activate
+			active
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			"data-control-ui": "thread-rail",
@@ -97,38 +106,71 @@ function ThreadRailItem({ from = "user", inView = false, active = false, index =
 		})
 	});
 }
-function ThreadRailLine({ className, ...props }) {
-	const { index, inView, activate } = useItem();
+function rovingTarget(key, index, count) {
+	const last = count - 1;
+	return {
+		ArrowDown: Math.min(index + 1, last),
+		ArrowUp: Math.max(index - 1, 0),
+		Home: 0,
+		End: last
+	}[key];
+}
+function ThreadRailLine({ className, onKeyDown, "aria-label": ariaLabel, ...props }) {
+	const { index, active } = useItem();
+	const rail = useRail();
 	return /* @__PURE__ */ jsx("button", {
+		ref: (node) => {
+			rail.lines.current[index] = node;
+		},
 		"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),
+		tabIndex: index === rail.current ? 0 : -1,
+		"aria-current": active ? "location" : void 0,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel === void 0 ? rail.layerId(index, "title") : void 0,
+		"aria-describedby": rail.layerId(index, "summary"),
+		onMouseEnter: () => rail.activate(index),
+		onFocus: () => rail.activate(index),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			const target = event.defaultPrevented ? void 0 : rovingTarget(event.key, index, rail.count);
+			if (target === void 0) return;
+			event.preventDefault();
+			rail.lines.current[target]?.focus();
+		},
+		className: cn("relative block cursor-pointer", className),
 		...props
 	});
 }
 function ThreadRailPopover(_props) {
 	return null;
 }
+function useLayerId(part) {
+	const rail = useRail();
+	const layer = useContext(LayerContext);
+	return layer === null ? void 0 : rail.layerId(layer, part);
+}
 function ThreadRailTitle({ className, ...props }) {
+	const id = useLayerId("title");
 	return /* @__PURE__ */ jsx("div", {
+		id,
 		"data-control-ui": "thread-rail",
 		"data-control-family": "thread-rail",
 		"data-slot": "title",
-		className: cn("truncate", className),
+		className: cn("line-clamp-2 text-pretty", className),
 		...props
 	});
 }
 function ThreadRailSummary({ className, ...props }) {
+	const id = useLayerId("summary");
 	return /* @__PURE__ */ jsx("p", {
+		id,
 		"data-control-ui": "thread-rail",
 		"data-control-family": "thread-rail",
 		"data-slot": "summary",
-		className: cn("line-clamp-3", className),
+		className: cn("line-clamp-3 text-pretty", className),
 		...props
 	});
 }

package/dist/transcript-divider.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/transcript-divider.tsx
 function TranscriptDivider({ tone = "neutral", className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		role: children == null ? "separator" : void 0,
 		"data-control-ui": "transcript-divider",
 		"data-control-family": "transcript-divider",
 		"data-slot": "root",
@@ -17,7 +18,7 @@ function TranscriptDividerLabel({ className, ...props }) {
 		"data-control-ui": "transcript-divider",
 		"data-control-family": "transcript-divider",
 		"data-slot": "label",
-		className: cn("min-w-0 truncate", className),
+		className: cn("min-w-0 text-center text-pretty", className),
 		...props
 	});
 }

package/dist/ui/alert.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { AlertKnobStyle } from "../knob-contracts/alert-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/alert.d.ts
@@ -9,12 +10,13 @@ export type AlertProps = Omit<ComponentProps<"div">, "style"> & {
   variant?: AlertVariant;
 };
 export type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & AlertKnobStyle;
 };
 export type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & AlertKnobStyle;
 };
 export declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
-export declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
+export declare function AlertTitle({ render, className, ...props }: AlertTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/alert.js

@@ -1,10 +1,12 @@
+"use client";
 import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/alert.tsx
 const alertVariants = ["default", "destructive"];
 function Alert({ variant = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		role: "alert",
+		role: variant === "destructive" ? "alert" : "status",
 		"data-control-ui": "alert",
 		"data-control-family": "alert",
 		"data-slot": "root",
@@ -14,13 +16,17 @@ function Alert({ variant = "default", className, ...props }) {
 		...props
 	});
 }
-function AlertTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "alert",
-		"data-control-family": "alert",
-		"data-slot": "title",
-		className: cn("col-start-2 min-w-0", className),
-		...props
+function AlertTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "alert",
+			"data-control-family": "alert",
+			"data-slot": "title",
+			className: cn("col-start-2 min-w-0", className)
+		}
 	});
 }
 function AlertDescription({ className, ...props }) {

package/dist/ui/autocomplete.js

@@ -53,7 +53,7 @@ function AutocompleteInput({ size = "md", className, ...props }) {
 			"data-size": size,
 			className: cn("w-full min-w-0 disabled:cursor-not-allowed", className),
 			...props
-		}), /* @__PURE__ */ jsx(AutocompleteClear, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
+		}), /* @__PURE__ */ jsx(AutocompleteClear, { className: "absolute end-1.5 top-1/2 -translate-y-1/2" })]
 	});
 }
 function AutocompleteContent({ className, children, sideOffset = 6, ...props }) {
@@ -85,7 +85,9 @@ function AutocompleteContent({ className, children, sideOffset = 6, ...props })
 function AutocompleteList({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		className: "w-full",
+		viewportClassName: "overscroll-contain",
 		maxHeight: "min(18rem, var(--available-height))",
+		lockAxis: "x",
 		children: /* @__PURE__ */ jsx(Autocomplete$1.List, {
 			"data-control-ui": "autocomplete",
 			"data-popup-kind": "autocomplete",
@@ -120,6 +122,10 @@ function AutocompleteItem({ className, children, disabled, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "autocomplete",
+			"data-control-family": "popup",
+			"data-popup-kind": "autocomplete",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center truncate",
 			children
 		})

package/dist/ui/avatar.d.ts

@@ -16,8 +16,16 @@ export type AvatarFallbackProps = Omit<ComponentProps<"span">, "style"> & {
   delay?: number;
   style?: CSSProperties & AvatarKnobStyle;
 };
+export declare const avatarBadgeStatuses: readonly ["online", "away", "busy", "offline"];
+export type AvatarBadgeStatus = (typeof avatarBadgeStatuses)[number];
+export type AvatarBadgeProps = Omit<ComponentProps<"span">, "style"> & {
+  status?: AvatarBadgeStatus;
+  label?: string;
+  style?: CSSProperties & AvatarKnobStyle;
+};
 export declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
 export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
 export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
 export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+export declare function AvatarBadge({ className, status, label, children, ...props }: AvatarBadgeProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/avatar.js

@@ -1,14 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 //#region src/ui/avatar.tsx
+const avatarBadgeStatuses = [
+	"online",
+	"away",
+	"busy",
+	"offline"
+];
 function Avatar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		"data-control-ui": "avatar",
 		"data-control-family": "avatar",
 		"data-slot": "root",
-		className: cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden align-middle", className),
+		className: cn("relative inline-flex shrink-0 select-none items-center justify-center align-middle", className),
 		...props
 	});
 }
@@ -40,5 +46,19 @@ function AvatarFallback({ className, ...props }) {
 		...props
 	});
 }
+function AvatarBadge({ className, status, label, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "badge",
+		"data-status": status,
+		className: cn("absolute inline-flex items-center justify-center", className),
+		...props,
+		children: [children, label ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}) : null]
+	});
+}
 //#endregion
-export { Avatar, AvatarFallback, AvatarGroup, AvatarImage };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarBadgeStatuses };

package/dist/ui/badge.js

@@ -27,7 +27,7 @@ function Badge({ variant = "default", size = "md", color, render, className, chi
 			"data-variant": variant,
 			"data-size": size,
 			"data-color": resolvedColor,
-			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", size === "sm" ? "text-micro" : "text-caption", className),
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", className),
 			children
 		}
 	});

package/dist/ui/breadcrumb.d.ts

@@ -0,0 +1,27 @@
+import { RenderProp } from "../control-props.js";
+import { BreadcrumbKnobStyle } from "../knob-contracts/breadcrumb-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/breadcrumb.d.ts
+export declare function Breadcrumb({ className, ...props }: ComponentProps<"nav"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: Omit<ComponentProps<"ol">, "style"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbLink({ render, className, children, ...props }: ComponentProps<"a"> & {
+  render?: RenderProp<ComponentProps<"a">>;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function BreadcrumbPage({ className, ...props }: Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<"li"> & {
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+export declare function BreadcrumbEllipsis({ label, className, ...props }: Omit<ComponentProps<"span">, "children"> & {
+  label?: string;
+  style?: CSSProperties & BreadcrumbKnobStyle;
+}): import("react").JSX.Element;
+//#endregion

package/dist/ui/breadcrumb.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+//#region src/ui/breadcrumb.tsx
+function Breadcrumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "root",
+		className,
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "list",
+		className: cn("flex flex-wrap items-center break-words", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "item",
+		className: cn("inline-flex items-center", className),
+		...props
+	});
+}
+function BreadcrumbLink({ render, className, children, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "breadcrumb",
+			"data-control-family": "breadcrumb",
+			"data-slot": "link",
+			className,
+			children
+		}
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "page",
+		"aria-current": "page",
+		className,
+		...props
+	});
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, { "data-icon-dir": "inline" })
+	});
+}
+function BreadcrumbEllipsis({ label = "Show hidden breadcrumbs", className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "breadcrumb",
+		"data-control-family": "breadcrumb",
+		"data-slot": "ellipsis",
+		className: cn("flex items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, {
+			"aria-hidden": "true",
+			className: "size-4"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/ui/button.d.ts

@@ -23,12 +23,13 @@ export type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
     disabled: boolean;
   }>;
   nativeButton?: boolean;
+  focusableWhenDisabled?: boolean;
 };
 export type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
   render?: RenderProp<ComponentProps<"a">>;
 };
 export type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
-export declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+export declare const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 export declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 export declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 export declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/ui/button.js

@@ -9,7 +9,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
-const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+const buttonStructureClasses = "isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
 const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 function wrapButtonText(children) {

package/dist/ui/calendar.js

@@ -4,8 +4,8 @@ import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
 //#region src/ui/calendar.tsx
-const dayButtonClasses = "flex w-full items-center justify-center disabled:pointer-events-none";
-const navButtonClasses = "inline-flex items-center justify-center disabled:pointer-events-none";
+const dayButtonClasses = "flex w-full items-center justify-center disabled:pointer-events-none aria-disabled:pointer-events-none";
+const navButtonClasses = "inline-flex items-center justify-center disabled:pointer-events-none aria-disabled:pointer-events-none";
 const chevronPathByOrientation = {
 	left: "M10 3 5.5 8 10 13",
 	right: "M6 3 10.5 8 6 13",

package/dist/ui/card.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
@@ -11,6 +12,7 @@ export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
 export type CardTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & CardKnobStyle;
 };
 export type CardDescriptionProps = ComponentProps<"div"> & {
@@ -27,7 +29,7 @@ export type CardFooterProps = ComponentProps<"div"> & {
 };
 export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
-export declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
 export declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
 export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;