@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/hooks/use-keyboard-navigation.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/use-keyboard-navigation.ts
+function useKeyboardNavigation() {
+	const [keyboardNavigation, setKeyboardNavigation] = useState(false);
+	useEffect(() => {
+		function markKeyboardNavigation(event) {
+			if (event.key === "Tab") setKeyboardNavigation(true);
+		}
+		function clearKeyboardNavigation() {
+			setKeyboardNavigation(false);
+		}
+		document.addEventListener("keydown", markKeyboardNavigation, true);
+		document.addEventListener("pointerdown", clearKeyboardNavigation, true);
+		return () => {
+			document.removeEventListener("keydown", markKeyboardNavigation, true);
+			document.removeEventListener("pointerdown", clearKeyboardNavigation, true);
+		};
+	}, []);
+	return keyboardNavigation;
+}
+//#endregion
+export { useKeyboardNavigation };

package/dist/hooks/use-mobile.d.ts

@@ -1,5 +1,4 @@
 //#region src/hooks/use-mobile.d.ts
 /** True below `breakpoint` px (Tailwind `md` by default); pass another breakpoint to match layout that switches elsewhere. */
-declare function useIsMobile(breakpoint?: number): boolean;
-//#endregion
-export { useIsMobile };
+export declare function useIsMobile(breakpoint?: number): boolean;
+//#endregion

package/dist/hooks/use-textarea-trigger-menu.d.ts

@@ -1,8 +1,7 @@
 import { TriggerConfig, TriggerMenuController, TriggerMenuItemData } from "./use-trigger-menu.js";
 import { RefObject } from "react";
 //#region src/hooks/use-textarea-trigger-menu.d.ts
-declare function useTextareaTriggerMenu<Item extends TriggerMenuItemData>(ref: RefObject<HTMLTextAreaElement | null>, options: {
+export declare function useTextareaTriggerMenu<Item extends TriggerMenuItemData>(ref: RefObject<HTMLTextAreaElement | null>, options: {
   triggers: readonly TriggerConfig<Item>[];
 }): TriggerMenuController<Item>;
-//#endregion
-export { useTextareaTriggerMenu };
+//#endregion

package/dist/hooks/use-trigger-menu.d.ts

@@ -1,7 +1,7 @@
 import { TriggerMatch } from "../lib/trigger-detect.js";
 import { ReactNode } from "react";
 //#region src/hooks/use-trigger-menu.d.ts
-type TriggerMenuItemData = {
+export type TriggerMenuItemData = {
   id: string;
   label: string;
   description?: string;
@@ -11,11 +11,11 @@ type TriggerMenuItemData = {
   kind?: string;
   image?: string;
 };
-type TriggerSelectContext = {
+export type TriggerSelectContext = {
   char: string;
   query: string;
 };
-type TriggerConfig<Item extends TriggerMenuItemData = TriggerMenuItemData> = {
+export type TriggerConfig<Item extends TriggerMenuItemData = TriggerMenuItemData> = {
   char: string;
   items: readonly Item[] | ((query: string) => readonly Item[]);
   filter?: (item: Item, query: string) => boolean;
@@ -23,11 +23,11 @@ type TriggerConfig<Item extends TriggerMenuItemData = TriggerMenuItemData> = {
   insertText?: (item: Item) => string;
   onSelect?: (item: Item, ctx: TriggerSelectContext) => void;
 };
-type UseTriggerMenuOptions<Item extends TriggerMenuItemData> = {
+export type UseTriggerMenuOptions<Item extends TriggerMenuItemData> = {
   triggers: readonly TriggerConfig<Item>[];
   onCommit: (item: Item, trigger: TriggerConfig<Item>, match: TriggerMatch) => void;
 };
-type TriggerMenuController<Item extends TriggerMenuItemData> = {
+export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   open: boolean;
   items: readonly Item[];
   activeIndex: number;
@@ -44,6 +44,5 @@ type TriggerMenuController<Item extends TriggerMenuItemData> = {
   close: () => void;
   setOpen: (open: boolean) => void;
 };
-declare function useTriggerMenu<Item extends TriggerMenuItemData>({ triggers, onCommit }: UseTriggerMenuOptions<Item>): TriggerMenuController<Item>;
-//#endregion
-export { TriggerConfig, TriggerMenuController, TriggerMenuItemData, TriggerSelectContext, UseTriggerMenuOptions, useTriggerMenu };
+export declare function useTriggerMenu<Item extends TriggerMenuItemData>({ triggers, onCommit }: UseTriggerMenuOptions<Item>): TriggerMenuController<Item>;
+//#endregion

package/dist/hooks/use-user-ask.d.ts

@@ -1,27 +1,28 @@
 import { UserAskKnobStyle } from "../knob-contracts/user-ask-knobs.js";
 import { CSSProperties, ComponentProps, KeyboardEvent, ReactNode } from "react";
 //#region src/hooks/use-user-ask.d.ts
-type UserAskAnswers = Record<string, string>;
-type UserAskProps = Omit<ComponentProps<"section">, "style"> & {
+export type UserAskAnswers = Record<string, string | string[]>;
+export type UserAskProps = Omit<ComponentProps<"section">, "style"> & {
   children?: ReactNode;
   onComplete?: (answers: UserAskAnswers) => void;
   onDismiss?: () => void;
   style?: CSSProperties & UserAskKnobStyle;
 };
-type UserAskQuestionEntry = {
+export type UserAskQuestionEntry = {
   key: string;
   id: string;
   title: string;
-  defaultValue?: string;
+  multiple?: boolean;
+  defaultValues?: string[];
 };
-type UserAskOptionEntry = {
+export type UserAskOptionEntry = {
   key: string;
   value: string;
   disabled?: boolean;
   /** Freeform options resolve to user's typed text instead of `value`. */
   freeform?: boolean;
 };
-declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps, "onComplete" | "onDismiss">): {
+export declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps, "onComplete" | "onDismiss">): {
   questions: UserAskQuestionEntry[];
   activeIndex: number;
   activeQuestion: UserAskQuestionEntry;
@@ -32,17 +33,17 @@ declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps, "onCom
   registerOption: (questionId: string, entry: UserAskOptionEntry) => void;
   unregisterOption: (questionId: string, key: string) => void;
   optionsFor: (questionId: string) => UserAskOptionEntry[];
-  selectionFor: (questionId: string) => string | undefined;
+  allowsMultiple: (questionId: string) => boolean;
+  selectionFor: (questionId: string) => string;
   isSelected: (questionId: string, optionKey: string) => boolean;
   select: (questionId: string, optionKey: string) => void;
   freeformTextFor: (questionId: string) => string;
   setFreeformText: (questionId: string, text: string) => void;
-  answerFor: (questionId: string) => string | undefined;
+  answerFor: (questionId: string) => string | string[] | undefined;
   resolveAnswers: () => UserAskAnswers;
   goTo: (index: number) => void;
   advance: () => void;
   dismiss: () => void;
   handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 };
-//#endregion
-export { UserAskAnswers, UserAskOptionEntry, UserAskProps, UserAskQuestionEntry, useUserAsk };
+//#endregion

package/dist/hooks/use-user-ask.js

@@ -3,6 +3,7 @@ import { useState } from "react";
 function upsert(entries, entry) {
 	const index = entries.findIndex((existing) => existing.key === entry.key);
 	if (index === -1) return [...entries, entry];
+	if (JSON.stringify(entries[index]) === JSON.stringify(entry)) return entries;
 	const next = [...entries];
 	next[index] = entry;
 	return next;
@@ -36,21 +37,39 @@ function useUserAsk({ onComplete, onDismiss }) {
 	function optionsFor(questionId) {
 		return optionsByQuestion[questionId] ?? [];
 	}
-	function selectionFor(questionId) {
+	function allowsMultiple(questionId) {
+		return questions.find((question) => question.id === questionId)?.multiple === true;
+	}
+	function selectedKeysFor(questionId) {
 		const explicit = selections[questionId];
 		if (explicit) return explicit;
-		const defaultValue = questions.find((question) => question.id === questionId)?.defaultValue;
-		if (defaultValue === void 0) return void 0;
-		return optionsFor(questionId).find((option) => !option.freeform && option.value === defaultValue)?.key;
+		const defaults = questions.find((question) => question.id === questionId)?.defaultValues;
+		if (defaults === void 0) return [];
+		return optionsFor(questionId).filter((option) => !option.freeform && defaults.includes(option.value)).map((option) => option.key);
+	}
+	function selectionFor(questionId) {
+		return selectedKeysFor(questionId)[0];
 	}
 	function isSelected(questionId, optionKey) {
-		return selectionFor(questionId) === optionKey;
+		return selectedKeysFor(questionId).includes(optionKey);
 	}
 	function select(questionId, optionKey) {
-		setSelections((previous) => ({
-			...previous,
-			[questionId]: optionKey
-		}));
+		if (!allowsMultiple(questionId)) {
+			setSelections((previous) => ({
+				...previous,
+				[questionId]: [optionKey]
+			}));
+			return;
+		}
+		const derived = selectedKeysFor(questionId);
+		setSelections((previous) => {
+			const current = previous[questionId] ?? derived;
+			const next = current.includes(optionKey) ? current.filter((entry) => entry !== optionKey) : [...current, optionKey];
+			return {
+				...previous,
+				[questionId]: next
+			};
+		});
 	}
 	function freeformTextFor(questionId) {
 		return freeformTexts[questionId] ?? "";
@@ -62,12 +81,17 @@ function useUserAsk({ onComplete, onDismiss }) {
 		}));
 	}
 	function answerFor(questionId) {
-		const selectedKey = selectionFor(questionId);
-		const option = optionsFor(questionId).find((entry) => entry.key === selectedKey);
-		if (!option) return void 0;
-		if (!option.freeform) return option.value;
-		const text = freeformTextFor(questionId).trim();
-		return text.length > 0 ? text : void 0;
+		const options = optionsFor(questionId);
+		const resolve = (optionKey) => {
+			const option = options.find((entry) => entry.key === optionKey);
+			if (!option) return void 0;
+			if (!option.freeform) return option.value;
+			const text = freeformTextFor(questionId).trim();
+			return text.length > 0 ? text : void 0;
+		};
+		const values = selectedKeysFor(questionId).map(resolve).filter((value) => value !== void 0);
+		if (!allowsMultiple(questionId)) return values[0];
+		return values.length > 0 ? values : void 0;
 	}
 	const canContinue = activeQuestion !== void 0 && answerFor(activeQuestion.id) !== void 0;
 	const isLastQuestion = activeIndex === questions.length - 1;
@@ -111,6 +135,20 @@ function useUserAsk({ onComplete, onDismiss }) {
 		const option = optionsFor(activeQuestion.id)[digit - 1];
 		if (option && !option.disabled) select(activeQuestion.id, option.key);
 	}
+	function moveActiveOption(event, delta) {
+		if (!activeQuestion) return;
+		if (!allowsMultiple(activeQuestion.id)) {
+			moveSelection(delta);
+			return;
+		}
+		const rows = [...event.currentTarget.querySelector("[data-slot=\"question\"][data-active]")?.querySelectorAll("[data-slot=\"option\"]:not([disabled])") ?? []];
+		if (rows.length === 0) return;
+		const focused = rows.findIndex((candidate) => candidate.contains(document.activeElement));
+		let start = focused;
+		if (focused === -1) start = delta > 0 ? -1 : 0;
+		const row = rows[(start + delta + rows.length) % rows.length];
+		(row?.matches("button, input") ? row : row?.querySelector("input, button"))?.focus();
+	}
 	function handleKeyDown(event) {
 		if (event.defaultPrevented) return;
 		if (event.key === "Escape") {
@@ -126,12 +164,12 @@ function useUserAsk({ onComplete, onDismiss }) {
 		if (event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")) return;
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
-			moveSelection(1);
+			moveActiveOption(event, 1);
 			return;
 		}
 		if (event.key === "ArrowUp") {
 			event.preventDefault();
-			moveSelection(-1);
+			moveActiveOption(event, -1);
 			return;
 		}
 		if (/^[1-9]$/.test(event.key)) {
@@ -150,6 +188,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 		registerOption,
 		unregisterOption,
 		optionsFor,
+		allowsMultiple,
 		selectionFor,
 		isSelected,
 		select,

package/dist/inline-attachment.d.ts

@@ -1,37 +1,36 @@
 import { InlineAttachmentKnobStyle } from "./knob-contracts/inline-attachment-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/inline-attachment.d.ts
-type InlineAttachmentState = "ready" | "pending" | "error";
+export type InlineAttachmentState = "ready" | "pending" | "error";
 type InlineAttachmentStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-type InlineAttachmentProps = InlineAttachmentStyleProps<ComponentProps<"button">, InlineAttachmentKnobStyle> & {
+export type InlineAttachmentProps = InlineAttachmentStyleProps<ComponentProps<"button">, InlineAttachmentKnobStyle> & {
   name: string;
   state?: InlineAttachmentState;
   /** Width-to-height ratio of the reserved box — generated media knows its ratio before its pixels, so arrival never reflows the turn. */
   aspect?: number;
 };
-declare function InlineAttachment({ name, state, aspect, disabled, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
-type InlineAttachmentMediaProps = ComponentProps<"div"> & {
+export declare function InlineAttachment({ name, state, aspect, disabled, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
+export type InlineAttachmentMediaProps = ComponentProps<"div"> & {
   src?: string;
   alt?: string;
 } & {
   style?: CSSProperties & InlineAttachmentKnobStyle;
 };
-declare function InlineAttachmentMedia({ src, alt, className, children, ...props }: InlineAttachmentMediaProps): import("react").JSX.Element;
-type InlineAttachmentContentProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
-declare function InlineAttachmentContent({ className, ...props }: InlineAttachmentContentProps): import("react").JSX.Element;
-type InlineAttachmentTitleProps = ComponentProps<"div"> & {
+export declare function InlineAttachmentMedia({ src, alt, className, children, ...props }: InlineAttachmentMediaProps): import("react").JSX.Element;
+export type InlineAttachmentContentProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
+export declare function InlineAttachmentContent({ className, ...props }: InlineAttachmentContentProps): import("react").JSX.Element;
+export type InlineAttachmentTitleProps = ComponentProps<"div"> & {
   style?: CSSProperties & InlineAttachmentKnobStyle;
 };
-declare function InlineAttachmentTitle({ children, className, ...props }: InlineAttachmentTitleProps): import("react").JSX.Element;
-type InlineAttachmentDescriptionProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
-declare function InlineAttachmentDescription({ className, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
-type InlineAttachmentActionsProps = ComponentProps<"div"> & {
+export declare function InlineAttachmentTitle({ children, className, ...props }: InlineAttachmentTitleProps): import("react").JSX.Element;
+export type InlineAttachmentDescriptionProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
+export declare function InlineAttachmentDescription({ className, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
+export type InlineAttachmentActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & InlineAttachmentKnobStyle;
 };
-declare function InlineAttachmentActions({ className, ...props }: InlineAttachmentActionsProps): import("react").JSX.Element;
-type InlineAttachmentActionProps = InlineAttachmentStyleProps<ComponentProps<"span">, InlineAttachmentKnobStyle>;
-declare function InlineAttachmentAction({ className, ...props }: InlineAttachmentActionProps): import("react").JSX.Element;
-//#endregion
-export { InlineAttachment, InlineAttachmentAction, InlineAttachmentActionProps, InlineAttachmentActions, InlineAttachmentActionsProps, InlineAttachmentContent, InlineAttachmentContentProps, InlineAttachmentDescription, InlineAttachmentDescriptionProps, InlineAttachmentMedia, InlineAttachmentMediaProps, InlineAttachmentProps, InlineAttachmentState, InlineAttachmentTitle, InlineAttachmentTitleProps };
+export declare function InlineAttachmentActions({ className, ...props }: InlineAttachmentActionsProps): import("react").JSX.Element;
+export type InlineAttachmentActionProps = InlineAttachmentStyleProps<ComponentProps<"span">, InlineAttachmentKnobStyle>;
+export declare function InlineAttachmentAction({ className, ...props }: InlineAttachmentActionProps): import("react").JSX.Element;
+//#endregion

package/dist/inline-attachment.js

@@ -146,7 +146,7 @@ function InlineAttachmentContent({ className, ...props }) {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "content",
-		className: cn("absolute inset-x-3 bottom-3", className),
+		className: cn("absolute", className),
 		...props
 	});
 }

package/dist/inline-citation.d.ts

@@ -3,7 +3,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
 import { InlineCitationKnobStyle } from "./knob-contracts/inline-citation-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/inline-citation.d.ts
-type SourceReference = {
+export type SourceReference = {
   href: string;
   title?: string;
   description?: string;
@@ -14,7 +14,7 @@ type InlineCitationStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
 type PopoverRootProps = ComponentProps<typeof Popover>;
-type InlineCitationProps = ComponentProps<"span"> & {
+export type InlineCitationProps = ComponentProps<"span"> & {
   sources: readonly SourceReference[];
   open?: PopoverRootProps["open"];
   defaultOpen?: PopoverRootProps["defaultOpen"];
@@ -22,35 +22,34 @@ type InlineCitationProps = ComponentProps<"span"> & {
 } & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
-type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle>;
-declare function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
-type InlineCitationFaviconsProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle> & {
+export declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
+export type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle>;
+export declare function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
+export type InlineCitationFaviconsProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle> & {
   limit?: number;
 };
-declare function InlineCitationFavicons({ limit, className, ...props }: InlineCitationFaviconsProps): import("react").JSX.Element;
-type InlineCitationLabelProps = ComponentProps<"span"> & {
+export declare function InlineCitationFavicons({ limit, className, ...props }: InlineCitationFaviconsProps): import("react").JSX.Element;
+export type InlineCitationLabelProps = ComponentProps<"span"> & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-declare function InlineCitationLabel({ className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
-type InlineCitationContentProps = ComponentProps<typeof PopoverContent>;
-declare function InlineCitationContent({ className, children, align, padding, ...props }: InlineCitationContentProps): import("react").JSX.Element;
-type InlineCitationNavigationProps = InlineCitationStyleProps<ComponentProps<"div">, InlineCitationKnobStyle>;
-declare function InlineCitationNavigation({ className, children, ...props }: InlineCitationNavigationProps): import("react").JSX.Element;
-type InlineCitationPreviousProps = Omit<ComponentProps<typeof Button>, "children"> & {
+export declare function InlineCitationLabel({ className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
+export type InlineCitationContentProps = ComponentProps<typeof PopoverContent>;
+export declare function InlineCitationContent({ className, children, align, padding, ...props }: InlineCitationContentProps): import("react").JSX.Element;
+export type InlineCitationNavigationProps = InlineCitationStyleProps<ComponentProps<"div">, InlineCitationKnobStyle>;
+export declare function InlineCitationNavigation({ className, children, ...props }: InlineCitationNavigationProps): import("react").JSX.Element;
+export type InlineCitationPreviousProps = Omit<ComponentProps<typeof Button>, "children"> & {
   children?: ReactNode;
 };
-declare function InlineCitationPrevious({ className, children, disabled, onClick, ...props }: InlineCitationPreviousProps): import("react").JSX.Element;
-type InlineCitationNextProps = Omit<ComponentProps<typeof Button>, "children"> & {
+export declare function InlineCitationPrevious({ className, children, disabled, onClick, ...props }: InlineCitationPreviousProps): import("react").JSX.Element;
+export type InlineCitationNextProps = Omit<ComponentProps<typeof Button>, "children"> & {
   children?: ReactNode;
 };
-declare function InlineCitationNext({ className, children, disabled, onClick, ...props }: InlineCitationNextProps): import("react").JSX.Element;
-type InlineCitationPositionProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle>;
-declare function InlineCitationPosition({ className, children, ...props }: InlineCitationPositionProps): import("react").JSX.Element;
-type InlineCitationSourceProps = Omit<ComponentProps<"article">, "style"> & {
+export declare function InlineCitationNext({ className, children, disabled, onClick, ...props }: InlineCitationNextProps): import("react").JSX.Element;
+export type InlineCitationPositionProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle>;
+export declare function InlineCitationPosition({ className, children, ...props }: InlineCitationPositionProps): import("react").JSX.Element;
+export type InlineCitationSourceProps = Omit<ComponentProps<"article">, "style"> & {
   source?: SourceReference;
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-declare function InlineCitationSource({ source: sourceProp, className, children, style, ref, ...props }: InlineCitationSourceProps): import("react").JSX.Element | null;
-//#endregion
-export { InlineCitation, InlineCitationContent, InlineCitationContentProps, InlineCitationFavicons, InlineCitationFaviconsProps, InlineCitationLabel, InlineCitationLabelProps, InlineCitationNavigation, InlineCitationNavigationProps, InlineCitationNext, InlineCitationNextProps, InlineCitationPosition, InlineCitationPositionProps, InlineCitationPrevious, InlineCitationPreviousProps, InlineCitationProps, InlineCitationSource, InlineCitationSourceProps, InlineCitationTrigger, InlineCitationTriggerProps, SourceReference };
+export declare function InlineCitationSource({ source: sourceProp, className, children, style, ref, ...props }: InlineCitationSourceProps): import("react").JSX.Element | null;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const accordionKnobs: readonly ["--cui-accordion-item-border-color", "--cui-accordion-item-border-width", "--cui-accordion-trigger-foreground", "--cui-accordion-trigger-hover-foreground", "--cui-accordion-icon-foreground"];
+export type AccordionKnobStyle = Partial<Record<(typeof accordionKnobs)[number], string>>;
+//#endregion

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

@@ -1,6 +1,7 @@
 //#region src/knob-contracts/accordion-knobs.ts
 const accordionKnobs = [
 	"--cui-accordion-item-border-color",
+	"--cui-accordion-item-border-width",
 	"--cui-accordion-trigger-foreground",
 	"--cui-accordion-trigger-hover-foreground",
 	"--cui-accordion-icon-foreground"

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const actionBarKnobs: readonly ["--cui-action-bar-hidden-opacity", "--cui-action-bar-visible-opacity"];
+export type ActionBarKnobStyle = Partial<Record<(typeof actionBarKnobs)[number], string>>;
+//#endregion

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

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

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const activityKnobs: readonly ["--cui-activity-row-foreground", "--cui-activity-trigger-radius", "--cui-activity-trigger-hover-background", "--cui-activity-code-background", "--cui-activity-code-radius"];
+export type ActivityKnobStyle = Partial<Record<(typeof activityKnobs)[number], string>>;
+//#endregion

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

@@ -3,7 +3,8 @@ const activityKnobs = [
 	"--cui-activity-row-foreground",
 	"--cui-activity-trigger-radius",
 	"--cui-activity-trigger-hover-background",
-	"--cui-activity-code-background"
+	"--cui-activity-code-background",
+	"--cui-activity-code-radius"
 ];
 //#endregion
 export { activityKnobs };

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const alertKnobs: readonly ["--cui-alert-radius", "--cui-alert-background", "--cui-alert-border-color", "--cui-alert-shadow", "--cui-alert-foreground", "--cui-alert-description-foreground", "--cui-alert-border-width", "--cui-alert-padding", "--cui-alert-padding-inline", "--cui-alert-gap", "--cui-alert-icon-gap", "--cui-alert-icon-size", "--cui-alert-font-size", "--cui-alert-description-gap", "--cui-alert-title-font-weight"];
+export type AlertKnobStyle = Partial<Record<(typeof alertKnobs)[number], string>>;
+//#endregion

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

@@ -3,7 +3,18 @@ const alertKnobs = [
 	"--cui-alert-radius",
 	"--cui-alert-background",
 	"--cui-alert-border-color",
-	"--cui-alert-shadow"
+	"--cui-alert-shadow",
+	"--cui-alert-foreground",
+	"--cui-alert-description-foreground",
+	"--cui-alert-border-width",
+	"--cui-alert-padding",
+	"--cui-alert-padding-inline",
+	"--cui-alert-gap",
+	"--cui-alert-icon-gap",
+	"--cui-alert-icon-size",
+	"--cui-alert-font-size",
+	"--cui-alert-description-gap",
+	"--cui-alert-title-font-weight"
 ];
 //#endregion
 export { alertKnobs };

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const audioRecorderKnobs: readonly ["--cui-audio-recorder-foreground", "--cui-audio-recorder-active-foreground", "--cui-audio-recorder-recording-ring-color", "--cui-audio-recorder-error-foreground"];
+export type AudioRecorderKnobStyle = Partial<Record<(typeof audioRecorderKnobs)[number], string>>;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke"];
+export type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
+//#endregion

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

@@ -1,6 +1,7 @@
 //#region src/knob-contracts/audio-visualizer-knobs.ts
 const audioVisualizerKnobs = [
 	"--cui-audio-visualizer-radius",
+	"--cui-audio-visualizer-bar-radius",
 	"--cui-audio-visualizer-bar-background",
 	"--cui-audio-visualizer-line-fill",
 	"--cui-audio-visualizer-line-stroke"

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const avatarKnobs: readonly ["--cui-avatar-radius", "--cui-avatar-group-ring-color", "--cui-avatar-fallback-background", "--cui-avatar-fallback-foreground", "--cui-avatar-image-outline-color"];
+export type AvatarKnobStyle = Partial<Record<(typeof avatarKnobs)[number], string>>;
+//#endregion

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

@@ -3,7 +3,8 @@ const avatarKnobs = [
 	"--cui-avatar-radius",
 	"--cui-avatar-group-ring-color",
 	"--cui-avatar-fallback-background",
-	"--cui-avatar-fallback-foreground"
+	"--cui-avatar-fallback-foreground",
+	"--cui-avatar-image-outline-color"
 ];
 //#endregion
 export { avatarKnobs };

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const badgeKnobs: readonly ["--cui-badge-radius", "--cui-badge-background", "--cui-badge-foreground", "--cui-badge-border-color"];
+export type BadgeKnobStyle = Partial<Record<(typeof badgeKnobs)[number], string>>;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const buttonGroupKnobs: readonly ["--cui-button-group-text-radius", "--cui-button-group-text-background", "--cui-button-group-text-foreground", "--cui-button-group-separator-background"];
+export type ButtonGroupKnobStyle = Partial<Record<(typeof buttonGroupKnobs)[number], string>>;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#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", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
-type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
-//#endregion
-export { ButtonKnobStyle, buttonKnobs };
+export declare const buttonKnobs: readonly ["--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-icon-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", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow"];
+export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
+//#endregion

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

@@ -5,6 +5,7 @@ const buttonKnobs = [
 	"--cui-button-icon",
 	"--cui-button-height",
 	"--cui-button-padding-inline",
+	"--cui-button-icon-padding-inline",
 	"--cui-button-font-size",
 	"--cui-button-background",
 	"--cui-button-background-image",

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

@@ -1,5 +1,4 @@
 //#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 };
+export declare const calendarKnobs: readonly ["--cui-calendar-day-radius", "--cui-calendar-today-background", "--cui-calendar-selected-background", "--cui-calendar-selected-foreground", "--cui-calendar-range-background"];
+export type CalendarKnobStyle = Partial<Record<(typeof calendarKnobs)[number], string>>;
+//#endregion

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

@@ -1,5 +1,4 @@
 //#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 };
+export 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"];
+export type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;
+//#endregion