@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/ui/trigger-menu.js

@@ -1,6 +1,6 @@
 "use client";
-import { controlEffectsAttribute } from "../skin.js";
 import { cn } from "../lib/cn.js";
+import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
@@ -103,6 +103,7 @@ function TriggerMenuGroup({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "trigger-menu",
 		"data-slot": "group",
+		role: "group",
 		className: cn("flex flex-col", className),
 		...props
 	});

package/dist/user-ask.d.ts

@@ -6,7 +6,7 @@ import { CSSProperties, ComponentProps } from "react";
 type UserAskStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-export declare function UserAsk({ onComplete, onDismiss, autoFocus, className, children, ...props }: UserAskProps): import("react").JSX.Element;
+export declare function UserAsk({ onComplete, onDismiss, autoFocus, questionStatusLabel, className, children, ...props }: UserAskProps): import("react").JSX.Element;
 export type UserAskHeaderProps = ComponentProps<"header"> & {
   style?: CSSProperties & UserAskKnobStyle;
 };
@@ -44,8 +44,13 @@ export type UserAskFooterProps = ComponentProps<"footer"> & {
   style?: CSSProperties & UserAskKnobStyle;
 };
 export declare function UserAskFooter({ className, ...props }: UserAskFooterProps): import("react").JSX.Element;
-export type UserAskDismissProps = ComponentProps<typeof Button>;
-export declare function UserAskDismiss({ className, children, onClick, ...props }: UserAskDismissProps): import("react").JSX.Element;
-export type UserAskSubmitProps = ComponentProps<typeof Button>;
-export declare function UserAskSubmit({ className, children, disabled, onClick, ...props }: UserAskSubmitProps): import("react").JSX.Element;
+export type UserAskDismissProps = ComponentProps<typeof Button> & {
+  label?: string;
+};
+export declare function UserAskDismiss({ label, className, children, onClick, ...props }: UserAskDismissProps): import("react").JSX.Element;
+export type UserAskSubmitProps = ComponentProps<typeof Button> & {
+  continueLabel?: string;
+  submitLabel?: string;
+};
+export declare function UserAskSubmit({ continueLabel, submitLabel, className, children, disabled, onClick, ...props }: UserAskSubmitProps): import("react").JSX.Element;
 //#endregion

package/dist/user-ask.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { useUserAsk } from "./hooks/use-user-ask.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { useUserAsk } from "./hooks/use-user-ask.js";
 import { Kbd } from "./ui/kbd.js";
-import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
 //#region src/user-ask.tsx
@@ -19,13 +20,18 @@ function useUserAskQuestionContext() {
 	if (!context) throw new Error("UserAsk options must be rendered inside <UserAskQuestion>.");
 	return context;
 }
-function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children, ...props }) {
+function defaultQuestionStatusLabel(current, total, title) {
+	return `Question ${current} of ${total}: ${title}`;
+}
+function UserAsk({ onComplete, onDismiss, autoFocus = false, questionStatusLabel = defaultQuestionStatusLabel, className, children, ...props }) {
 	const ask = useUserAsk({
 		onComplete,
 		onDismiss
 	});
 	const titleId = useId();
 	const panelRef = useRef(null);
+	const [hasNavigated, setHasNavigated] = useState(false);
+	const questionStatus = hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
 	useEffect(() => {
 		if (autoFocus) panelRef.current?.focus();
 	}, [autoFocus]);
@@ -33,6 +39,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 	useEffect(() => {
 		if (lastActiveIndex.current === ask.activeIndex) return;
 		lastActiveIndex.current = ask.activeIndex;
+		setHasNavigated(true);
 		const panel = panelRef.current;
 		const active = document.activeElement;
 		const activeIsUsable = active instanceof HTMLElement && panel?.contains(active) && active.checkVisibility();
@@ -43,7 +50,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 			...ask,
 			titleId
 		},
-		children: /* @__PURE__ */ jsx("section", {
+		children: /* @__PURE__ */ jsxs("section", {
 			ref: panelRef,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
@@ -54,7 +61,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 			onKeyDown: ask.handleKeyDown,
 			className: cn("relative w-full", className),
 			...props,
-			children
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: questionStatus })]
 		})
 	});
 }
@@ -212,6 +219,7 @@ function UserAskOption({ value, recommended = false, disabled = false, className
 			role: question.multiple ? "checkbox" : "radio",
 			"aria-checked": selected,
 			disabled,
+			tabIndex: ask.isTabStop(question.id, key) ? 0 : -1,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option",
@@ -297,6 +305,7 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 		role: question.multiple ? "checkbox" : "radio",
 		"aria-checked": false,
 		disabled,
+		tabIndex: ask.isTabStop(question.id, key) ? 0 : -1,
 		"data-control-ui": "user-ask",
 		"data-control-family": "user-ask",
 		"data-slot": "option",
@@ -334,7 +343,7 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 			type: "button",
 			role: "checkbox",
 			"aria-checked": true,
-			"aria-label": `Clear ${label}`,
+			"aria-label": label,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option-indicator",
@@ -343,12 +352,17 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 			onClick: () => ask.select(question.id, key),
 			className: "inline-flex shrink-0 items-center justify-center",
 			children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
-		}) : /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": true,
+			"aria-label": label,
+			tabIndex: -1,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option-indicator",
 			"data-selected": "",
+			onClick: () => inputRef.current?.focus(),
 			className: "inline-flex shrink-0 items-center justify-center",
 			children: /* @__PURE__ */ jsx(PencilLine, { className: "size-3" })
 		}), /* @__PURE__ */ jsx("input", {
@@ -376,7 +390,7 @@ function UserAskFooter({ className, ...props }) {
 		...props
 	});
 }
-function UserAskDismiss({ className, children, onClick, ...props }) {
+function UserAskDismiss({ label = "Dismiss", className, children, onClick, ...props }) {
 	const ask = useUserAskContext();
 	function handleClick(event) {
 		onClick?.(event);
@@ -389,13 +403,17 @@ function UserAskDismiss({ className, children, onClick, ...props }) {
 		type: "button",
 		variant: "quiet",
 		size: "xs",
+		"aria-keyshortcuts": "Escape",
 		onClick: handleClick,
 		className: cn(className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Dismiss", /* @__PURE__ */ jsx(Kbd, { children: "esc" })] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "Esc"
+		})] })
 	});
 }
-function UserAskSubmit({ className, children, disabled, onClick, ...props }) {
+function UserAskSubmit({ continueLabel = "Continue", submitLabel = "Submit answers", className, children, disabled, onClick, ...props }) {
 	const ask = useUserAskContext();
 	function handleClick(event) {
 		onClick?.(event);
@@ -410,10 +428,12 @@ function UserAskSubmit({ className, children, disabled, onClick, ...props }) {
 		tone: "primary",
 		size: "xs",
 		disabled: disabled ?? !ask.canContinue,
+		"aria-keyshortcuts": "Enter",
 		onClick: handleClick,
 		className,
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Continue", /* @__PURE__ */ jsx(Kbd, {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [ask.isLastQuestion ? submitLabel : continueLabel, /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
 			"data-user-ask-submit-kbd": "true",
 			children: "⏎"
 		})] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
+    "frimousse": "^0.4.0",
     "libphonenumber-js": "^1.13.13",
     "lucide-react": "^1.47.0",
     "prosemirror-commands": "^1.7.2",
@@ -69,6 +70,9 @@
     "diff": {
       "optional": true
     },
+    "frimousse": {
+      "optional": true
+    },
     "libphonenumber-js": {
       "optional": true
     },

package/dist/hooks/use-keyboard-navigation.d.ts

@@ -1,3 +0,0 @@
-//#region src/hooks/use-keyboard-navigation.d.ts
-export declare function useKeyboardNavigation(): boolean;
-//#endregion

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

@@ -1,22 +0,0 @@
-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 };