@ctrl-ui/react 0.8.0

package/dist/inline-citation.js

@@ -0,0 +1,319 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { SourceFavicon, sourceHostname } from "./source-badge.js";
+import { createContext, useContext, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
+//#region src/inline-citation.tsx
+const InlineCitationContext = createContext(null);
+function useInlineCitation() {
+	const context = useContext(InlineCitationContext);
+	if (!context) throw new Error("InlineCitation parts must be rendered inside <InlineCitation>.");
+	return context;
+}
+function supportsCrossSlide() {
+	return typeof CSS !== "undefined" && CSS.supports("(anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)");
+}
+function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }) {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [entering, setEntering] = useState(null);
+	const [exiting, setExiting] = useState(null);
+	const sourceRef = useRef(null);
+	const exitCount = useRef(0);
+	const clearEntering = useRef(0);
+	const lastIndex = Math.max(0, sources.length - 1);
+	const currentIndex = Math.min(selectedIndex, lastIndex);
+	const currentSource = sources[currentIndex];
+	const hasPrevious = currentIndex > 0;
+	const hasNext = currentIndex < lastIndex;
+	const move = (step) => {
+		const nextIndex = Math.min(Math.max(currentIndex + step, 0), lastIndex);
+		if (nextIndex === currentIndex) return;
+		const direction = step > 0 ? "right" : "left";
+		const leaving = sources[currentIndex];
+		setSelectedIndex(nextIndex);
+		setEntering({
+			direction,
+			previousHeight: sourceRef.current?.getBoundingClientRect().height
+		});
+		if (leaving && supportsCrossSlide()) {
+			exitCount.current += 1;
+			setExiting({
+				id: exitCount.current,
+				direction,
+				source: leaving
+			});
+		}
+		cancelAnimationFrame(clearEntering.current);
+		clearEntering.current = requestAnimationFrame(() => {
+			clearEntering.current = requestAnimationFrame(() => setEntering(null));
+		});
+	};
+	const handleOpenChange = (...args) => {
+		const [nextOpen] = args;
+		if (!nextOpen) {
+			setEntering(null);
+			setExiting(null);
+		}
+		onOpenChange?.(...args);
+	};
+	const context = {
+		currentIndex,
+		currentSource,
+		entering,
+		exiting,
+		endExit: (id) => setExiting((current) => current?.id === id ? null : current),
+		hasNext,
+		hasPrevious,
+		next: () => move(1),
+		previous: () => move(-1),
+		sourceRef,
+		sources
+	};
+	return /* @__PURE__ */ jsx(InlineCitationContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "inline-citation",
+			"data-control-family": "inline-citation",
+			"data-slot": "root",
+			...props,
+			className: cn("not-prose inline-flex align-baseline", className),
+			children: /* @__PURE__ */ jsx(Popover, {
+				open,
+				defaultOpen,
+				onOpenChange: handleOpenChange,
+				children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationTrigger, {}), /* @__PURE__ */ jsx(InlineCitationContent, {})] })
+			})
+		})
+	});
+}
+function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }) {
+	const { sources } = useInlineCitation();
+	const firstSource = sources[0];
+	const sourceCount = sources.length;
+	const accessibleLabel = sourceCount === 1 ? "View 1 source" : `View ${sourceCount} sources`;
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		render: render ?? /* @__PURE__ */ jsx("button", { type: "button" }),
+		"aria-label": ariaLabel ?? accessibleLabel,
+		...props,
+		disabled: disabled || !firstSource,
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "trigger",
+		className: cn("inline-flex items-center align-baseline", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationFavicons, {}), /* @__PURE__ */ jsx(InlineCitationLabel, {})] })
+	});
+}
+function InlineCitationFavicons({ limit = 3, className, ...props }) {
+	const { sources } = useInlineCitation();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "favicons",
+		...props,
+		className: cn("flex shrink-0 -space-x-1", className),
+		children: sources.slice(0, limit).map((source) => /* @__PURE__ */ jsx(SourceFavicon, {
+			"data-control-ui": "inline-citation",
+			"data-slot": "favicon",
+			href: source.href,
+			faviconSrc: source.faviconSrc
+		}, source.href))
+	});
+}
+function InlineCitationLabel({ className, children, ...props }) {
+	const { sources } = useInlineCitation();
+	const firstSource = sources[0];
+	const additionalSourceCount = Math.max(0, sources.length - 1);
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "label",
+		...props,
+		className: cn("min-w-0 truncate", className),
+		children: children ?? (firstSource ? `${sourceHostname(firstSource.href)}${additionalSourceCount > 0 ? ` +${additionalSourceCount}` : ""}` : "No sources")
+	});
+}
+function InlineCitationContent({ className, children, align = "start", padding = "none", ...props }) {
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		align,
+		padding,
+		...props,
+		"data-control-ui": "inline-citation",
+		"data-slot": "content",
+		"data-slide": "scope",
+		className: cn("w-[min(24rem,calc(100vw-2rem))] overflow-hidden", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(InlineCitationNavigation, {}), /* @__PURE__ */ jsx(InlineCitationSource, {})] })
+	});
+}
+function InlineCitationNavigation({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "navigation",
+		...props,
+		className: cn("flex items-center", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(InlineCitationPrevious, {}),
+			/* @__PURE__ */ jsx(InlineCitationNext, {}),
+			/* @__PURE__ */ jsx(InlineCitationPosition, {})
+		] })
+	});
+}
+function InlineCitationPrevious({ className, children, disabled, onClick, ...props }) {
+	const { hasPrevious, previous } = useInlineCitation();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Previous source",
+		size: "xs",
+		variant: "quiet",
+		iconOnly: true,
+		...props,
+		disabled: disabled || !hasPrevious,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) previous();
+		},
+		"data-control-ui": "inline-citation",
+		"data-slot": "previous",
+		className,
+		children: children ?? /* @__PURE__ */ jsx(ArrowLeft, { "aria-hidden": "true" })
+	});
+}
+function InlineCitationNext({ className, children, disabled, onClick, ...props }) {
+	const { hasNext, next } = useInlineCitation();
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Next source",
+		size: "xs",
+		variant: "quiet",
+		iconOnly: true,
+		...props,
+		disabled: disabled || !hasNext,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) next();
+		},
+		"data-control-ui": "inline-citation",
+		"data-slot": "next",
+		className,
+		children: children ?? /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true" })
+	});
+}
+function InlineCitationPosition({ className, children, ...props }) {
+	const { currentIndex, sources } = useInlineCitation();
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "position",
+		...props,
+		className: cn(className),
+		children: children ?? `${sources.length === 0 ? 0 : currentIndex + 1}/${sources.length}`
+	});
+}
+function InlineCitationSourceDetails({ source }) {
+	const hostname = sourceHostname(source.href);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "inline-citation",
+			"data-control-family": "inline-citation",
+			"data-slot": "source-header",
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx(SourceFavicon, {
+				"data-control-ui": "inline-citation",
+				"data-slot": "source-favicon",
+				href: source.href,
+				faviconSrc: source.faviconSrc
+			}), /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "inline-citation",
+				"data-control-family": "inline-citation",
+				"data-slot": "source-hostname",
+				className: "min-w-0 truncate",
+				children: hostname
+			})]
+		}),
+		/* @__PURE__ */ jsxs("a", {
+			"data-control-ui": "inline-citation",
+			"data-control-family": "inline-citation",
+			"data-slot": "source-title",
+			href: source.href,
+			target: "_blank",
+			rel: "noreferrer noopener",
+			className: "group/source-title flex min-w-0 items-start",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 wrap-anywhere",
+				children: source.title ?? hostname
+			}), /* @__PURE__ */ jsx(ExternalLink, {
+				"data-control-ui": "inline-citation",
+				"data-control-family": "inline-citation",
+				"data-slot": "source-external-icon",
+				"aria-hidden": "true",
+				className: "shrink-0"
+			})]
+		}),
+		source.description ? /* @__PURE__ */ jsx("p", {
+			"data-control-ui": "inline-citation",
+			"data-control-family": "inline-citation",
+			"data-slot": "source-description",
+			className: "line-clamp-3",
+			children: source.description
+		}) : null,
+		source.quote ? /* @__PURE__ */ jsxs("blockquote", {
+			"data-control-ui": "inline-citation",
+			"data-control-family": "inline-citation",
+			"data-slot": "source-quote",
+			children: [
+				"“",
+				source.quote,
+				"”"
+			]
+		}) : null
+	] });
+}
+function InlineCitationSource({ source: sourceProp, className, children, style, ref, ...props }) {
+	const { currentIndex, currentSource, entering, exiting, endExit, sourceRef } = useInlineCitation();
+	const source = sourceProp ?? currentSource;
+	const slides = !sourceProp && !children;
+	const panelClassName = cn("grid", className);
+	const sourceStyle = style;
+	const enteringStyle = slides && entering?.previousHeight ? {
+		"--aui-slide-prev-height": `${entering.previousHeight}px`,
+		...sourceStyle
+	} : sourceStyle;
+	if (!source) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("article", {
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "source",
+		"data-slide": "panel",
+		"data-activation-direction": slides ? entering?.direction : void 0,
+		"data-starting-style": slides && entering ? "" : void 0,
+		...props,
+		ref: (node) => {
+			sourceRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		style: enteringStyle,
+		className: panelClassName,
+		children: children ?? /* @__PURE__ */ jsx(InlineCitationSourceDetails, { source })
+	}, `source-${currentIndex}`), slides && exiting ? /* @__PURE__ */ jsx("article", {
+		"aria-hidden": "true",
+		inert: true,
+		"data-control-ui": "inline-citation",
+		"data-control-family": "inline-citation",
+		"data-slot": "source",
+		"data-slide": "panel",
+		"data-ending-style": "",
+		"data-activation-direction": exiting.direction,
+		onAnimationEnd: () => endExit(exiting.id),
+		style: sourceStyle,
+		className: panelClassName,
+		children: /* @__PURE__ */ jsx(InlineCitationSourceDetails, { source: exiting.source })
+	}, `exit-${exiting.id}`) : null] });
+}
+//#endregion
+export { InlineCitation, InlineCitationContent, InlineCitationFavicons, InlineCitationLabel, InlineCitationNavigation, InlineCitationNext, InlineCitationPosition, InlineCitationPrevious, InlineCitationSource, InlineCitationTrigger };

package/dist/knob-contracts/accordion-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/accordion-knobs.d.ts
+declare const accordionKnobs: readonly ["--cui-accordion-item-border-color", "--cui-accordion-trigger-foreground", "--cui-accordion-trigger-hover-foreground", "--cui-accordion-icon-foreground"];
+type AccordionKnobStyle = Partial<Record<(typeof accordionKnobs)[number], string>>;
+//#endregion
+export { AccordionKnobStyle, accordionKnobs };

package/dist/knob-contracts/accordion-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/accordion-knobs.ts
+const accordionKnobs = [
+	"--cui-accordion-item-border-color",
+	"--cui-accordion-trigger-foreground",
+	"--cui-accordion-trigger-hover-foreground",
+	"--cui-accordion-icon-foreground"
+];
+//#endregion
+export { accordionKnobs };

package/dist/knob-contracts/action-bar-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/action-bar-knobs.d.ts
+declare const actionBarKnobs: readonly [];
+type ActionBarKnobStyle = Partial<Record<(typeof actionBarKnobs)[number], string>>;
+//#endregion
+export { ActionBarKnobStyle, actionBarKnobs };

package/dist/knob-contracts/action-bar-knobs.js

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/action-bar-knobs.ts
+const actionBarKnobs = [];
+//#endregion
+export { actionBarKnobs };

package/dist/knob-contracts/activity-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/activity-knobs.d.ts
+declare const activityKnobs: readonly ["--cui-activity-row-foreground", "--cui-activity-trigger-radius", "--cui-activity-trigger-hover-background", "--cui-activity-code-background"];
+type ActivityKnobStyle = Partial<Record<(typeof activityKnobs)[number], string>>;
+//#endregion
+export { ActivityKnobStyle, activityKnobs };

package/dist/knob-contracts/activity-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/activity-knobs.ts
+const activityKnobs = [
+	"--cui-activity-row-foreground",
+	"--cui-activity-trigger-radius",
+	"--cui-activity-trigger-hover-background",
+	"--cui-activity-code-background"
+];
+//#endregion
+export { activityKnobs };

package/dist/knob-contracts/alert-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/alert-knobs.d.ts
+declare const alertKnobs: readonly ["--cui-alert-radius", "--cui-alert-background", "--cui-alert-border-color", "--cui-alert-shadow"];
+type AlertKnobStyle = Partial<Record<(typeof alertKnobs)[number], string>>;
+//#endregion
+export { AlertKnobStyle, alertKnobs };

package/dist/knob-contracts/alert-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/alert-knobs.ts
+const alertKnobs = [
+	"--cui-alert-radius",
+	"--cui-alert-background",
+	"--cui-alert-border-color",
+	"--cui-alert-shadow"
+];
+//#endregion
+export { alertKnobs };

package/dist/knob-contracts/audio-recorder-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/audio-recorder-knobs.d.ts
+declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-active-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground"];
+type AudioRecorderKnobStyle = Partial<Record<(typeof audioRecorderKnobs)[number], string>>;
+//#endregion
+export { AudioRecorderKnobStyle, audioRecorderKnobs };

package/dist/knob-contracts/audio-recorder-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/audio-recorder-knobs.ts
+const audioRecorderKnobs = [
+	"--cui-audio-recorder-foreground",
+	"--cui-audio-recorder-active-foreground",
+	"--cui-audio-recorder-recording-ring-color",
+	"--cui-audio-recorder-error-foreground"
+];
+//#endregion
+export { audioRecorderKnobs };

package/dist/knob-contracts/audio-visualizer-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/audio-visualizer-knobs.d.ts
+declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke"];
+type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
+//#endregion
+export { AudioVisualizerKnobStyle, audioVisualizerKnobs };

package/dist/knob-contracts/audio-visualizer-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/audio-visualizer-knobs.ts
+const audioVisualizerKnobs = [
+	"--cui-audio-visualizer-radius",
+	"--cui-audio-visualizer-bar-background",
+	"--cui-audio-visualizer-line-fill",
+	"--cui-audio-visualizer-line-stroke"
+];
+//#endregion
+export { audioVisualizerKnobs };

package/dist/knob-contracts/avatar-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/avatar-knobs.d.ts
+declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground"];
+type AvatarKnobStyle = Partial<Record<(typeof avatarKnobs)[number], string>>;
+//#endregion
+export { AvatarKnobStyle, avatarKnobs };

package/dist/knob-contracts/avatar-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/avatar-knobs.ts
+const avatarKnobs = [
+	"--cui-avatar-radius",
+	"--cui-avatar-group-ring-color",
+	"--cui-avatar-fallback-background",
+	"--cui-avatar-fallback-foreground"
+];
+//#endregion
+export { avatarKnobs };

package/dist/knob-contracts/badge-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/badge-knobs.d.ts
+declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color"];
+type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
+//#endregion
+export { BadgeKnobStyle, badgeKnobs };

package/dist/knob-contracts/badge-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/badge-knobs.ts
+const badgeKnobs = [
+	"--cui-badge-radius",
+	"--cui-badge-background",
+	"--cui-badge-foreground",
+	"--cui-badge-border-color"
+];
+//#endregion
+export { badgeKnobs };

package/dist/knob-contracts/button-group-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/button-group-knobs.d.ts
+declare const buttonGroupKnobs: readonly ["--cui-button-group-text-radius", "--cui-button-group-text-background", "--cui-button-group-text-foreground", "--cui-button-group-separator-background"];
+type ButtonGroupKnobStyle = Partial<Record<(typeof buttonGroupKnobs)[number], string>>;
+//#endregion
+export { ButtonGroupKnobStyle, buttonGroupKnobs };

package/dist/knob-contracts/button-group-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/button-group-knobs.ts
+const buttonGroupKnobs = [
+	"--cui-button-group-text-radius",
+	"--cui-button-group-text-background",
+	"--cui-button-group-text-foreground",
+	"--cui-button-group-separator-background"
+];
+//#endregion
+export { buttonGroupKnobs };

package/dist/knob-contracts/button-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/button-knobs.d.ts
+declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-font-size", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-press-background", "--cui-button-press-scale", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow"];
+type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
+//#endregion
+export { ButtonKnobStyle, buttonKnobs };

package/dist/knob-contracts/button-knobs.js

@@ -0,0 +1,25 @@
+//#region src/knob-contracts/button-knobs.ts
+const buttonKnobs = [
+	"--cui-button-radius",
+	"--cui-button-gap",
+	"--cui-button-icon",
+	"--cui-button-height",
+	"--cui-button-padding-inline",
+	"--cui-button-font-size",
+	"--cui-button-background",
+	"--cui-button-background-image",
+	"--cui-button-foreground",
+	"--cui-button-hover-background",
+	"--cui-button-hover-foreground",
+	"--cui-button-press-background",
+	"--cui-button-press-scale",
+	"--cui-button-active-background",
+	"--cui-button-active-foreground",
+	"--cui-button-active-hover-background",
+	"--cui-button-shadow",
+	"--cui-button-hover-shadow",
+	"--cui-button-press-shadow",
+	"--cui-button-active-shadow"
+];
+//#endregion
+export { buttonKnobs };

package/dist/knob-contracts/calendar-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/calendar-knobs.d.ts
+declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background"];
+type CalendarKnobStyle = Partial<Record<(typeof calendarKnobs)[number], string>>;
+//#endregion
+export { CalendarKnobStyle, calendarKnobs };

package/dist/knob-contracts/calendar-knobs.js

@@ -0,0 +1,10 @@
+//#region src/knob-contracts/calendar-knobs.ts
+const calendarKnobs = [
+	"--cui-calendar-day-radius",
+	"--cui-calendar-today-background",
+	"--cui-calendar-selected-background",
+	"--cui-calendar-selected-foreground",
+	"--cui-calendar-range-background"
+];
+//#endregion
+export { calendarKnobs };

package/dist/knob-contracts/card-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/card-knobs.d.ts
+declare const cardKnobs: readonly ["--cui-card-radius", "--cui-card-background", "--cui-card-border-color", "--cui-card-border-width", "--cui-card-shadow", "--cui-card-backdrop-filter"];
+type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;
+//#endregion
+export { CardKnobStyle, cardKnobs };

package/dist/knob-contracts/card-knobs.js

@@ -0,0 +1,11 @@
+//#region src/knob-contracts/card-knobs.ts
+const cardKnobs = [
+	"--cui-card-radius",
+	"--cui-card-background",
+	"--cui-card-border-color",
+	"--cui-card-border-width",
+	"--cui-card-shadow",
+	"--cui-card-backdrop-filter"
+];
+//#endregion
+export { cardKnobs };

package/dist/knob-contracts/chat-composer-attachment-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/chat-composer-attachment-knobs.d.ts
+declare const chatComposerAttachmentKnobs: readonly ["--cui-chat-composer-attachment-radius", "--cui-chat-composer-attachment-background", "--cui-chat-composer-attachment-border-color", "--cui-chat-composer-attachment-shadow", "--cui-chat-composer-attachment-progress-background", "--cui-chat-composer-attachment-progress-foreground"];
+type ChatComposerAttachmentKnobStyle = Partial<Record<(typeof chatComposerAttachmentKnobs)[number], string>>;
+//#endregion
+export { ChatComposerAttachmentKnobStyle, chatComposerAttachmentKnobs };

package/dist/knob-contracts/chat-composer-attachment-knobs.js

@@ -0,0 +1,11 @@
+//#region src/knob-contracts/chat-composer-attachment-knobs.ts
+const chatComposerAttachmentKnobs = [
+	"--cui-chat-composer-attachment-radius",
+	"--cui-chat-composer-attachment-background",
+	"--cui-chat-composer-attachment-border-color",
+	"--cui-chat-composer-attachment-shadow",
+	"--cui-chat-composer-attachment-progress-background",
+	"--cui-chat-composer-attachment-progress-foreground"
+];
+//#endregion
+export { chatComposerAttachmentKnobs };

package/dist/knob-contracts/chat-composer-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/chat-composer-knobs.d.ts
+declare const chatComposerKnobs: readonly ["--cui-chat-composer-root-background", "--cui-chat-composer-shell-radius", "--cui-chat-composer-shell-background", "--cui-chat-composer-shell-background-image", "--cui-chat-composer-shell-backdrop-filter", "--cui-chat-composer-shell-border-color", "--cui-chat-composer-shell-shadow", "--cui-chat-composer-input-foreground", "--cui-chat-composer-input-placeholder-foreground", "--cui-chat-composer-mention-background", "--cui-chat-composer-mention-radius", "--cui-chat-composer-mention-border-color", "--cui-chat-composer-mention-border-width"];
+type ChatComposerKnobStyle = Partial<Record<(typeof chatComposerKnobs)[number], string>>;
+//#endregion
+export { ChatComposerKnobStyle, chatComposerKnobs };

package/dist/knob-contracts/chat-composer-knobs.js

@@ -0,0 +1,18 @@
+//#region src/knob-contracts/chat-composer-knobs.ts
+const chatComposerKnobs = [
+	"--cui-chat-composer-root-background",
+	"--cui-chat-composer-shell-radius",
+	"--cui-chat-composer-shell-background",
+	"--cui-chat-composer-shell-background-image",
+	"--cui-chat-composer-shell-backdrop-filter",
+	"--cui-chat-composer-shell-border-color",
+	"--cui-chat-composer-shell-shadow",
+	"--cui-chat-composer-input-foreground",
+	"--cui-chat-composer-input-placeholder-foreground",
+	"--cui-chat-composer-mention-background",
+	"--cui-chat-composer-mention-radius",
+	"--cui-chat-composer-mention-border-color",
+	"--cui-chat-composer-mention-border-width"
+];
+//#endregion
+export { chatComposerKnobs };

package/dist/knob-contracts/chat-layout-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/chat-layout-knobs.d.ts
+declare const chatLayoutKnobs: readonly ["--cui-chat-layout-radius", "--cui-chat-layout-background", "--cui-chat-layout-border-color", "--cui-chat-layout-shadow", "--cui-chat-layout-thought-foreground", "--cui-chat-layout-thought-hover-background"];
+type ChatLayoutKnobStyle = Partial<Record<(typeof chatLayoutKnobs)[number], string>>;
+//#endregion
+export { ChatLayoutKnobStyle, chatLayoutKnobs };

package/dist/knob-contracts/chat-layout-knobs.js

@@ -0,0 +1,11 @@
+//#region src/knob-contracts/chat-layout-knobs.ts
+const chatLayoutKnobs = [
+	"--cui-chat-layout-radius",
+	"--cui-chat-layout-background",
+	"--cui-chat-layout-border-color",
+	"--cui-chat-layout-shadow",
+	"--cui-chat-layout-thought-foreground",
+	"--cui-chat-layout-thought-hover-background"
+];
+//#endregion
+export { chatLayoutKnobs };

package/dist/knob-contracts/chat-message-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/chat-message-knobs.d.ts
+declare const chatMessageKnobs: readonly ["--cui-chat-message-avatar-radius", "--cui-chat-message-avatar-background", "--cui-chat-message-avatar-border-color", "--cui-chat-message-avatar-border-width", "--cui-chat-message-radius", "--cui-chat-message-corner-radius", "--cui-chat-message-background", "--cui-chat-message-background-image", "--cui-chat-message-foreground", "--cui-chat-message-border-color", "--cui-chat-message-border-width", "--cui-chat-message-shadow"];
+type ChatMessageKnobStyle = Partial<Record<(typeof chatMessageKnobs)[number], string>>;
+//#endregion
+export { ChatMessageKnobStyle, chatMessageKnobs };

package/dist/knob-contracts/chat-message-knobs.js

@@ -0,0 +1,17 @@
+//#region src/knob-contracts/chat-message-knobs.ts
+const chatMessageKnobs = [
+	"--cui-chat-message-avatar-radius",
+	"--cui-chat-message-avatar-background",
+	"--cui-chat-message-avatar-border-color",
+	"--cui-chat-message-avatar-border-width",
+	"--cui-chat-message-radius",
+	"--cui-chat-message-corner-radius",
+	"--cui-chat-message-background",
+	"--cui-chat-message-background-image",
+	"--cui-chat-message-foreground",
+	"--cui-chat-message-border-color",
+	"--cui-chat-message-border-width",
+	"--cui-chat-message-shadow"
+];
+//#endregion
+export { chatMessageKnobs };

package/dist/knob-contracts/choice-knobs.d.ts

@@ -0,0 +1,5 @@
+//#region src/knob-contracts/choice-knobs.d.ts
+declare const choiceKnobs: readonly ["--cui-choice-radius", "--cui-choice-border-color", "--cui-choice-checked-background", "--cui-choice-checked-border-color"];
+type ChoiceKnobStyle = Partial<Record<(typeof choiceKnobs)[number], string>>;
+//#endregion
+export { ChoiceKnobStyle, choiceKnobs };