@ctrl-ui/react 0.8.4 → 0.8.6

package/dist/user-ask.js

@@ -126,30 +126,37 @@ function UserAskPagination({ className, ...props }) {
 		]
 	});
 }
-function UserAskQuestion({ id, title, defaultValue, className, children, ...props }) {
+function UserAskQuestion({ id, title, multiple = false, defaultValue, className, children, ...props }) {
 	const ask = useUserAskContext();
 	const key = useId();
 	const active = ask.activeQuestion?.key === key;
-	useEffect(() => ask.registerQuestion({
-		key,
-		id,
-		title,
-		defaultValue
-	}), [
+	const defaultKey = Array.isArray(defaultValue) ? defaultValue.join("\0") : defaultValue;
+	useEffect(() => {
+		const defaultValues = defaultKey === void 0 ? void 0 : defaultKey.split("\0");
+		return ask.registerQuestion({
+			key,
+			id,
+			title,
+			multiple,
+			defaultValues
+		});
+	}, [
 		ask.registerQuestion,
 		key,
 		id,
 		title,
-		defaultValue
+		multiple,
+		defaultKey
 	]);
 	useEffect(() => () => ask.unregisterQuestion(key), [ask.unregisterQuestion, key]);
 	return /* @__PURE__ */ jsx(UserAskQuestionContext.Provider, {
 		value: {
 			id,
-			active
+			active,
+			multiple
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			role: "radiogroup",
+			role: multiple ? "group" : "radiogroup",
 			"aria-labelledby": active ? ask.titleId : void 0,
 			hidden: !active,
 			"data-control-ui": "user-ask",
@@ -202,12 +209,13 @@ function UserAskOption({ value, recommended = false, disabled = false, className
 		},
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			role: "radio",
+			role: question.multiple ? "checkbox" : "radio",
 			"aria-checked": selected,
 			disabled,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option",
+			"data-multiple": question.multiple ? "" : void 0,
 			"data-selected": selected ? "" : void 0,
 			"data-recommended": recommended ? "" : void 0,
 			onClick: handleClick,
@@ -218,6 +226,7 @@ function UserAskOption({ value, recommended = false, disabled = false, className
 				"data-control-ui": "user-ask",
 				"data-control-family": "user-ask",
 				"data-slot": "option-indicator",
+				"data-multiple": question.multiple ? "" : void 0,
 				"data-selected": selected ? "" : void 0,
 				className: "inline-flex shrink-0 items-center justify-center",
 				children: selected ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : index + 1
@@ -285,12 +294,13 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 	}
 	if (!selected) return /* @__PURE__ */ jsxs("button", {
 		type: "button",
-		role: "radio",
+		role: question.multiple ? "checkbox" : "radio",
 		"aria-checked": false,
 		disabled,
 		"data-control-ui": "user-ask",
 		"data-control-family": "user-ask",
 		"data-slot": "option",
+		"data-multiple": question.multiple ? "" : void 0,
 		"data-freeform": "",
 		onClick: () => ask.select(question.id, key),
 		className: cn(optionRowClasses, "disabled:cursor-not-allowed", className),
@@ -300,6 +310,7 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option-indicator",
+			"data-multiple": question.multiple ? "" : void 0,
 			className: "inline-flex shrink-0 items-center justify-center",
 			children: index + 1
 		}), /* @__PURE__ */ jsx("span", {
@@ -314,11 +325,25 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 		"data-control-ui": "user-ask",
 		"data-control-family": "user-ask",
 		"data-slot": "option",
+		"data-multiple": question.multiple ? "" : void 0,
 		"data-selected": "",
 		"data-freeform": "",
 		className: cn(optionRowClasses, className),
 		style,
-		children: [/* @__PURE__ */ jsx("span", {
+		children: [question.multiple ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "checkbox",
+			"aria-checked": true,
+			"aria-label": `Clear ${label}`,
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "option-indicator",
+			"data-multiple": "",
+			"data-selected": "",
+			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",
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/damien-schneider/control-ui.git",
+    "url": "git+https://github.com/damien-schneider/control-ui.git",
     "directory": "packages/components"
   },
   "homepage": "https://control-ui.dev",
@@ -50,6 +50,7 @@
     "prosemirror-view": "^1.42.3",
     "react": "^19.2.8",
     "react-day-picker": "^10.0.1",
+    "react-dom": "^19.2.8",
     "react-email": "^6.9.5",
     "react-phone-number-input": "^3.4.18",
     "react-resizable-panels": "^4.12.4",