@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/forms/radio-group/index.cjs

@@ -0,0 +1,226 @@
+"use client";
+const require_radio_group_utils = require("./radio-group.utils.cjs");
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+// src/components/forms/radio-group/index.tsx
+const RadioGroupContext = (0, react.createContext)(null);
+const useRadioGroupContext = () => {
+	const context = (0, react.useContext)(RadioGroupContext);
+	if (!context) throw new Error("Radio must be rendered inside a RadioGroup.");
+	return context;
+};
+const Radio = ({ value, label, children, description, disabled = false, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }) => {
+	const context = useRadioGroupContext();
+	const generatedId = (0, react.useId)();
+	const inputId = id ?? generatedId;
+	const descriptionId = description != null ? `${inputId}-description` : void 0;
+	const radioLabel = label ?? children;
+	const labelId = radioLabel != null ? `${inputId}-label` : void 0;
+	const isDisabled = context.disabled || disabled;
+	const isSelected = context.value === value;
+	const isRequired = Boolean(context.name) && context.required && context.requiredValue === value;
+	const describedBy = require_radio_group_utils.mergeDescribedBy(context.describedBy, ariaDescribedBy, descriptionId);
+	const rovingRef = context.rovingFocus.getItemRef(value);
+	const setInputRef = (0, react.useCallback)((node) => {
+		rovingRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref, rovingRef]);
+	const handleFocus = (event) => {
+		context.rovingFocus.onItemFocus(value);
+		if (context.keyboardNavigationRef.current) {
+			context.keyboardNavigationRef.current = false;
+			context.selectValue(value);
+		}
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		const isHorizontalArrow = event.key === "ArrowLeft" || event.key === "ArrowRight";
+		const isVerticalArrow = event.key === "ArrowUp" || event.key === "ArrowDown";
+		const isArrowKey = isHorizontalArrow || isVerticalArrow;
+		const isSupportedArrow = context.orientation === "horizontal" ? isHorizontalArrow : isVerticalArrow;
+		if (isArrowKey && !isSupportedArrow) {
+			event.preventDefault();
+			return;
+		}
+		const activeElement = event.currentTarget.ownerDocument.activeElement;
+		context.keyboardNavigationRef.current = true;
+		context.rovingFocus.onItemKeyDown(event, value);
+		if (event.currentTarget.ownerDocument.activeElement === activeElement) context.keyboardNavigationRef.current = false;
+	};
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (!event.defaultPrevented) context.selectValue(value);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-radio", `puzzle-radio--${context.size}`, isSelected && "puzzle-radio--checked", isDisabled && "puzzle-radio--disabled", className),
+		style,
+		"data-state": isSelected ? "checked" : "unchecked",
+		"data-disabled": isDisabled ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...inputProps,
+				ref: setInputRef,
+				id: inputId,
+				className: "puzzle-radio__input",
+				type: "radio",
+				name: context.name,
+				form: context.form,
+				value,
+				checked: isSelected,
+				disabled: isDisabled,
+				required: isRequired,
+				tabIndex: context.rovingFocus.getItemTabIndex(value, isDisabled),
+				"aria-labelledby": inputProps["aria-labelledby"] ?? (inputProps["aria-label"] ? void 0 : labelId),
+				"aria-describedby": describedBy,
+				"aria-invalid": context.invalid ? true : ariaInvalid,
+				"data-state": isSelected ? "checked" : "unchecked",
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onKeyDown: handleKeyDown
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-radio__control",
+				"aria-hidden": "true"
+			}),
+			(radioLabel != null || description != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "puzzle-radio__content",
+				children: [radioLabel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: labelId,
+					className: "puzzle-radio__label",
+					children: radioLabel
+				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: descriptionId,
+					className: "puzzle-radio__description",
+					children: description
+				})]
+			})
+		]
+	});
+};
+const isRadioElement = (child) => (0, react.isValidElement)(child) && child.type === Radio;
+const getRadioElements = (children) => react.Children.toArray(children).flatMap((child) => {
+	if ((0, react.isValidElement)(child) && child.type === react.Fragment) return getRadioElements(child.props.children);
+	return isRadioElement(child) ? [child] : [];
+});
+const RadioGroupRoot = ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required = false, disabled = false, orientation = "vertical", size = "md", dir = "ltr", loop = true, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }) => {
+	const generatedId = (0, react.useId)();
+	const groupId = id ?? generatedId;
+	const descriptionId = description != null ? `${groupId}-description` : void 0;
+	const errorState = require_radio_group_utils.resolveRadioGroupError(error, invalid);
+	const errorId = errorState.hasError ? `${groupId}-error` : void 0;
+	const describedBy = require_radio_group_utils.mergeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const groupName = name?.trim() || void 0;
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(() => defaultValue);
+	const isControlled = value !== void 0;
+	const selectedValue = isControlled ? value ?? void 0 : uncontrolledValue;
+	const radioElements = getRadioElements(children);
+	const seenValues = /* @__PURE__ */ new Set();
+	for (const radio of radioElements) {
+		const radioValue = radio.props.value;
+		if (seenValues.has(radioValue)) throw new Error("RadioGroup radio values must be unique.");
+		seenValues.add(radioValue);
+	}
+	const firstEnabledValue = radioElements.find((radio) => !disabled && !radio.props.disabled)?.props.value;
+	const selectedFocusValue = radioElements.find((radio) => radio.props.value === selectedValue && !disabled && !radio.props.disabled)?.props.value ?? firstEnabledValue;
+	const focusItems = radioElements.map((radio) => ({
+		id: radio.props.value,
+		disabled: disabled || radio.props.disabled
+	}));
+	const rovingFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: focusItems,
+		orientation,
+		dir,
+		loop,
+		initialActiveId: selectedFocusValue
+	});
+	(0, react.useEffect)(() => {
+		if (selectedFocusValue !== void 0) rovingFocus.onItemFocus(selectedFocusValue);
+	}, [selectedFocusValue, rovingFocus.onItemFocus]);
+	const keyboardNavigationRef = (0, react.useRef)(false);
+	const selectValue = (0, react.useCallback)((nextValue) => {
+		if (selectedValue === nextValue) return;
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [
+		isControlled,
+		onValueChange,
+		selectedValue
+	]);
+	const contextValue = {
+		value: selectedValue,
+		name: groupName,
+		form,
+		disabled,
+		required,
+		requiredValue: firstEnabledValue,
+		orientation,
+		size,
+		invalid: errorState.isInvalid,
+		describedBy,
+		keyboardNavigationRef,
+		rovingFocus,
+		selectValue
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+			...rootProps,
+			id: groupId,
+			form,
+			disabled,
+			className: (0, _puzzle_ui_core.cn)("puzzle-radio-group", className),
+			style,
+			role: role ?? "radiogroup",
+			dir,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": describedBy,
+			"aria-invalid": errorState.isInvalid ? true : ariaInvalid,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			"data-orientation": orientation,
+			"data-disabled": disabled ? "true" : void 0,
+			"data-invalid": errorState.isInvalid ? "true" : void 0,
+			"data-size": size,
+			children: [
+				label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("legend", {
+					id: `${groupId}-label`,
+					className: "puzzle-radio-group__legend",
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-radio-group__required",
+						"aria-hidden": "true",
+						children: "*"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-radio-group__options",
+					"data-orientation": orientation,
+					children
+				}),
+				description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					id: descriptionId,
+					className: "puzzle-radio-group__description",
+					children: description
+				}),
+				errorState.hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					id: errorId,
+					className: "puzzle-radio-group__error",
+					role: "alert",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: errorState.errorContent
+				})
+			]
+		})
+	});
+};
+const RadioGroup = RadioGroupRoot;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/radio-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createContext","useContext","useId","mergeDescribedBy","useCallback","cn","isValidElement","Children","Fragment","resolveRadioGroupError","useState","useRovingFocus","useRef"],"sources":["../../../../src/components/forms/radio-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  Fragment,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus, type UseRovingFocusReturn } from \"@puzzle-ui/hooks\";\n\nimport type {\n  RadioGroupOrientation,\n  RadioGroupProps,\n  RadioGroupSize,\n  RadioProps,\n} from \"./radio-group.types\";\n\nimport { mergeDescribedBy, resolveRadioGroupError } from \"./radio-group.utils\";\n\nimport \"./radio-group.css\";\n\ntype RadioGroupContextValue = {\n  value: string | undefined;\n  name: string | undefined;\n  form: string | undefined;\n  disabled: boolean;\n  required: boolean;\n  requiredValue: string | undefined;\n  orientation: RadioGroupOrientation;\n  size: RadioGroupSize;\n  invalid: boolean;\n  describedBy: string | undefined;\n  keyboardNavigationRef: { current: boolean };\n  rovingFocus: UseRovingFocusReturn<HTMLInputElement>;\n  selectValue: (value: string) => void;\n};\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nconst useRadioGroupContext = () => {\n  const context = useContext(RadioGroupContext);\n\n  if (!context) {\n    throw new Error(\"Radio must be rendered inside a RadioGroup.\");\n  }\n\n  return context;\n};\n\nconst Radio = ({\n  value,\n  label,\n  children,\n  description,\n  disabled = false,\n  className,\n  style,\n  id,\n  ref,\n  onChange,\n  onFocus,\n  onKeyDown,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...inputProps\n}: RadioProps) => {\n  const context = useRadioGroupContext();\n\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const descriptionId =\n    description != null ? `${inputId}-description` : undefined;\n\n  const radioLabel = label ?? children;\n  const labelId = radioLabel != null ? `${inputId}-label` : undefined;\n\n  const isDisabled = context.disabled || disabled;\n  const isSelected = context.value === value;\n\n  const isRequired =\n    Boolean(context.name) &&\n    context.required &&\n    context.requiredValue === value;\n\n  const describedBy = mergeDescribedBy(\n    context.describedBy,\n    ariaDescribedBy,\n    descriptionId,\n  );\n\n  const rovingRef = context.rovingFocus.getItemRef(value);\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      rovingRef(node);\n\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref, rovingRef],\n  );\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    context.rovingFocus.onItemFocus(value);\n\n    if (context.keyboardNavigationRef.current) {\n      context.keyboardNavigationRef.current = false;\n      context.selectValue(value);\n    }\n\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || isDisabled) {\n      return;\n    }\n\n    const isHorizontalArrow =\n      event.key === \"ArrowLeft\" || event.key === \"ArrowRight\";\n\n    const isVerticalArrow =\n      event.key === \"ArrowUp\" || event.key === \"ArrowDown\";\n\n    const isArrowKey = isHorizontalArrow || isVerticalArrow;\n\n    const isSupportedArrow =\n      context.orientation === \"horizontal\"\n        ? isHorizontalArrow\n        : isVerticalArrow;\n\n    // Prevent the browser's native radio navigation from\n    // moving focus in the wrong orientation.\n    if (isArrowKey && !isSupportedArrow) {\n      event.preventDefault();\n      return;\n    }\n\n    const activeElement = event.currentTarget.ownerDocument.activeElement;\n\n    context.keyboardNavigationRef.current = true;\n\n    context.rovingFocus.onItemKeyDown(event, value);\n\n    // The focus event normally consumes this flag. If focus\n    // did not change (e.g. one-item group), clear it here.\n    if (event.currentTarget.ownerDocument.activeElement === activeElement) {\n      context.keyboardNavigationRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n\n    if (!event.defaultPrevented) {\n      context.selectValue(value);\n    }\n  };\n\n  return (\n    <label\n      className={cn(\n        \"puzzle-radio\",\n        `puzzle-radio--${context.size}`,\n        isSelected && \"puzzle-radio--checked\",\n        isDisabled && \"puzzle-radio--disabled\",\n        className,\n      )}\n      style={style}\n      data-state={isSelected ? \"checked\" : \"unchecked\"}\n      data-disabled={isDisabled ? \"true\" : undefined}\n    >\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        id={inputId}\n        className=\"puzzle-radio__input\"\n        type=\"radio\"\n        name={context.name}\n        form={context.form}\n        value={value}\n        checked={isSelected}\n        disabled={isDisabled}\n        required={isRequired}\n        tabIndex={context.rovingFocus.getItemTabIndex(value, isDisabled)}\n        // The wrapping label also contains the description; name the radio by\n        // its label text only and expose the description via aria-describedby.\n        aria-labelledby={\n          inputProps[\"aria-labelledby\"] ??\n          (inputProps[\"aria-label\"] ? undefined : labelId)\n        }\n        aria-describedby={describedBy}\n        aria-invalid={context.invalid ? true : ariaInvalid}\n        data-state={isSelected ? \"checked\" : \"unchecked\"}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n      />\n\n      <span className=\"puzzle-radio__control\" aria-hidden=\"true\" />\n\n      {(radioLabel != null || description != null) && (\n        <span className=\"puzzle-radio__content\">\n          {radioLabel != null && (\n            <span id={labelId} className=\"puzzle-radio__label\">\n              {radioLabel}\n            </span>\n          )}\n\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-radio__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\ntype RadioElement = ReactElement<RadioProps, typeof Radio>;\n\nconst isRadioElement = (child: ReactNode): child is RadioElement =>\n  isValidElement<RadioProps>(child) && child.type === Radio;\n\nconst getRadioElements = (children: ReactNode): RadioElement[] =>\n  Children.toArray(children).flatMap((child): RadioElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getRadioElements(child.props.children);\n    }\n\n    return isRadioElement(child) ? [child] : [];\n  });\n\nconst RadioGroupRoot = ({\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  form,\n  label,\n  description,\n  error,\n  invalid,\n  required = false,\n  disabled = false,\n  orientation = \"vertical\",\n  size = \"md\",\n  dir = \"ltr\",\n  loop = true,\n  children,\n  id,\n  className,\n  style,\n  role,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rootProps\n}: RadioGroupProps): ReactElement => {\n  const generatedId = useId();\n  const groupId = id ?? generatedId;\n\n  const descriptionId =\n    description != null ? `${groupId}-description` : undefined;\n\n  const errorState = resolveRadioGroupError(error, invalid);\n\n  const errorId = errorState.hasError ? `${groupId}-error` : undefined;\n\n  const describedBy = mergeDescribedBy(ariaDescribedBy, descriptionId, errorId);\n\n  const groupName = name?.trim() || undefined;\n\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    string | undefined\n  >(() => defaultValue);\n\n  const isControlled = value !== undefined;\n\n  const selectedValue = isControlled ? (value ?? undefined) : uncontrolledValue;\n\n  const radioElements = getRadioElements(children);\n\n  const seenValues = new Set<string>();\n\n  for (const radio of radioElements) {\n    const radioValue = radio.props.value;\n\n    if (seenValues.has(radioValue)) {\n      throw new Error(\"RadioGroup radio values must be unique.\");\n    }\n\n    seenValues.add(radioValue);\n  }\n\n  const firstEnabledValue = radioElements.find(\n    (radio) => !disabled && !radio.props.disabled,\n  )?.props.value;\n\n  const selectedFocusValue =\n    radioElements.find(\n      (radio) =>\n        radio.props.value === selectedValue &&\n        !disabled &&\n        !radio.props.disabled,\n    )?.props.value ?? firstEnabledValue;\n\n  const focusItems = radioElements.map((radio) => ({\n    id: radio.props.value,\n    disabled: disabled || radio.props.disabled,\n  }));\n\n  const rovingFocus = useRovingFocus<HTMLInputElement>({\n    items: focusItems,\n    orientation,\n    dir,\n    loop,\n    initialActiveId: selectedFocusValue,\n  });\n\n  useEffect(() => {\n    if (selectedFocusValue !== undefined) {\n      rovingFocus.onItemFocus(selectedFocusValue);\n    }\n  }, [selectedFocusValue, rovingFocus.onItemFocus]);\n\n  const keyboardNavigationRef = useRef(false);\n\n  const selectValue = useCallback(\n    (nextValue: string) => {\n      if (selectedValue === nextValue) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    },\n    [isControlled, onValueChange, selectedValue],\n  );\n\n  const contextValue: RadioGroupContextValue = {\n    value: selectedValue,\n    name: groupName,\n    form,\n    disabled,\n    required,\n    requiredValue: firstEnabledValue,\n    orientation,\n    size,\n    invalid: errorState.isInvalid,\n    describedBy,\n    keyboardNavigationRef,\n    rovingFocus,\n    selectValue,\n  };\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <fieldset\n        {...rootProps}\n        id={groupId}\n        form={form}\n        disabled={disabled}\n        className={cn(\"puzzle-radio-group\", className)}\n        style={style}\n        role={role ?? \"radiogroup\"}\n        dir={dir}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={errorState.isInvalid ? true : ariaInvalid}\n        aria-required={required || undefined}\n        aria-disabled={disabled || undefined}\n        data-orientation={orientation}\n        data-disabled={disabled ? \"true\" : undefined}\n        data-invalid={errorState.isInvalid ? \"true\" : undefined}\n        data-size={size}\n      >\n        {label != null && (\n          <legend\n            id={`${groupId}-label`}\n            className=\"puzzle-radio-group__legend\"\n          >\n            {label}\n\n            {required && (\n              <span className=\"puzzle-radio-group__required\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </legend>\n        )}\n\n        <div\n          className=\"puzzle-radio-group__options\"\n          data-orientation={orientation}\n        >\n          {children}\n        </div>\n\n        {description != null && (\n          <div id={descriptionId} className=\"puzzle-radio-group__description\">\n            {description}\n          </div>\n        )}\n\n        {errorState.hasError && (\n          <div\n            id={errorId}\n            className=\"puzzle-radio-group__error\"\n            role=\"alert\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {errorState.errorContent}\n          </div>\n        )}\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n};\n\nconst RadioGroup = RadioGroupRoot;\n\nexport {\n  RadioGroup,\n  Radio,\n  type RadioGroupProps,\n  type RadioProps,\n  type RadioGroupOrientation,\n  type RadioGroupSize,\n};\n"],"mappings":"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"}

package/dist/components/forms/radio-group/index.d.cts

@@ -0,0 +1,5 @@
+import { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps } from "./radio-group.types.cjs";
+import { ReactElement } from "react";
+declare const Radio: ({ value, label, children, description, disabled, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: RadioProps) => import("react").JSX.Element;
+declare const RadioGroup: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps };

package/dist/components/forms/radio-group/index.d.ts

@@ -0,0 +1,5 @@
+import { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps } from "./radio-group.types.js";
+import { ReactElement } from "react";
+declare const Radio: ({ value, label, children, description, disabled, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: RadioProps) => import("react").JSX.Element;
+declare const RadioGroup: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps };

package/dist/components/forms/radio-group/index.js

@@ -0,0 +1,225 @@
+"use client";
+import { mergeDescribedBy, resolveRadioGroupError } from "./radio-group.utils.js";
+import "./radio-group.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRovingFocus } from "@puzzle-ui/hooks";
+// src/components/forms/radio-group/index.tsx
+const RadioGroupContext = createContext(null);
+const useRadioGroupContext = () => {
+	const context = useContext(RadioGroupContext);
+	if (!context) throw new Error("Radio must be rendered inside a RadioGroup.");
+	return context;
+};
+const Radio = ({ value, label, children, description, disabled = false, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }) => {
+	const context = useRadioGroupContext();
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const descriptionId = description != null ? `${inputId}-description` : void 0;
+	const radioLabel = label ?? children;
+	const labelId = radioLabel != null ? `${inputId}-label` : void 0;
+	const isDisabled = context.disabled || disabled;
+	const isSelected = context.value === value;
+	const isRequired = Boolean(context.name) && context.required && context.requiredValue === value;
+	const describedBy = mergeDescribedBy(context.describedBy, ariaDescribedBy, descriptionId);
+	const rovingRef = context.rovingFocus.getItemRef(value);
+	const setInputRef = useCallback((node) => {
+		rovingRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref, rovingRef]);
+	const handleFocus = (event) => {
+		context.rovingFocus.onItemFocus(value);
+		if (context.keyboardNavigationRef.current) {
+			context.keyboardNavigationRef.current = false;
+			context.selectValue(value);
+		}
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || isDisabled) return;
+		const isHorizontalArrow = event.key === "ArrowLeft" || event.key === "ArrowRight";
+		const isVerticalArrow = event.key === "ArrowUp" || event.key === "ArrowDown";
+		const isArrowKey = isHorizontalArrow || isVerticalArrow;
+		const isSupportedArrow = context.orientation === "horizontal" ? isHorizontalArrow : isVerticalArrow;
+		if (isArrowKey && !isSupportedArrow) {
+			event.preventDefault();
+			return;
+		}
+		const activeElement = event.currentTarget.ownerDocument.activeElement;
+		context.keyboardNavigationRef.current = true;
+		context.rovingFocus.onItemKeyDown(event, value);
+		if (event.currentTarget.ownerDocument.activeElement === activeElement) context.keyboardNavigationRef.current = false;
+	};
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (!event.defaultPrevented) context.selectValue(value);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("puzzle-radio", `puzzle-radio--${context.size}`, isSelected && "puzzle-radio--checked", isDisabled && "puzzle-radio--disabled", className),
+		style,
+		"data-state": isSelected ? "checked" : "unchecked",
+		"data-disabled": isDisabled ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				ref: setInputRef,
+				id: inputId,
+				className: "puzzle-radio__input",
+				type: "radio",
+				name: context.name,
+				form: context.form,
+				value,
+				checked: isSelected,
+				disabled: isDisabled,
+				required: isRequired,
+				tabIndex: context.rovingFocus.getItemTabIndex(value, isDisabled),
+				"aria-labelledby": inputProps["aria-labelledby"] ?? (inputProps["aria-label"] ? void 0 : labelId),
+				"aria-describedby": describedBy,
+				"aria-invalid": context.invalid ? true : ariaInvalid,
+				"data-state": isSelected ? "checked" : "unchecked",
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onKeyDown: handleKeyDown
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "puzzle-radio__control",
+				"aria-hidden": "true"
+			}),
+			(radioLabel != null || description != null) && /* @__PURE__ */ jsxs("span", {
+				className: "puzzle-radio__content",
+				children: [radioLabel != null && /* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "puzzle-radio__label",
+					children: radioLabel
+				}), description != null && /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: "puzzle-radio__description",
+					children: description
+				})]
+			})
+		]
+	});
+};
+const isRadioElement = (child) => isValidElement(child) && child.type === Radio;
+const getRadioElements = (children) => Children.toArray(children).flatMap((child) => {
+	if (isValidElement(child) && child.type === Fragment) return getRadioElements(child.props.children);
+	return isRadioElement(child) ? [child] : [];
+});
+const RadioGroupRoot = ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required = false, disabled = false, orientation = "vertical", size = "md", dir = "ltr", loop = true, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }) => {
+	const generatedId = useId();
+	const groupId = id ?? generatedId;
+	const descriptionId = description != null ? `${groupId}-description` : void 0;
+	const errorState = resolveRadioGroupError(error, invalid);
+	const errorId = errorState.hasError ? `${groupId}-error` : void 0;
+	const describedBy = mergeDescribedBy(ariaDescribedBy, descriptionId, errorId);
+	const groupName = name?.trim() || void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue);
+	const isControlled = value !== void 0;
+	const selectedValue = isControlled ? value ?? void 0 : uncontrolledValue;
+	const radioElements = getRadioElements(children);
+	const seenValues = /* @__PURE__ */ new Set();
+	for (const radio of radioElements) {
+		const radioValue = radio.props.value;
+		if (seenValues.has(radioValue)) throw new Error("RadioGroup radio values must be unique.");
+		seenValues.add(radioValue);
+	}
+	const firstEnabledValue = radioElements.find((radio) => !disabled && !radio.props.disabled)?.props.value;
+	const selectedFocusValue = radioElements.find((radio) => radio.props.value === selectedValue && !disabled && !radio.props.disabled)?.props.value ?? firstEnabledValue;
+	const focusItems = radioElements.map((radio) => ({
+		id: radio.props.value,
+		disabled: disabled || radio.props.disabled
+	}));
+	const rovingFocus = useRovingFocus({
+		items: focusItems,
+		orientation,
+		dir,
+		loop,
+		initialActiveId: selectedFocusValue
+	});
+	useEffect(() => {
+		if (selectedFocusValue !== void 0) rovingFocus.onItemFocus(selectedFocusValue);
+	}, [selectedFocusValue, rovingFocus.onItemFocus]);
+	const keyboardNavigationRef = useRef(false);
+	const selectValue = useCallback((nextValue) => {
+		if (selectedValue === nextValue) return;
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}, [
+		isControlled,
+		onValueChange,
+		selectedValue
+	]);
+	const contextValue = {
+		value: selectedValue,
+		name: groupName,
+		form,
+		disabled,
+		required,
+		requiredValue: firstEnabledValue,
+		orientation,
+		size,
+		invalid: errorState.isInvalid,
+		describedBy,
+		keyboardNavigationRef,
+		rovingFocus,
+		selectValue
+	};
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			...rootProps,
+			id: groupId,
+			form,
+			disabled,
+			className: cn("puzzle-radio-group", className),
+			style,
+			role: role ?? "radiogroup",
+			dir,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": describedBy,
+			"aria-invalid": errorState.isInvalid ? true : ariaInvalid,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			"data-orientation": orientation,
+			"data-disabled": disabled ? "true" : void 0,
+			"data-invalid": errorState.isInvalid ? "true" : void 0,
+			"data-size": size,
+			children: [
+				label != null && /* @__PURE__ */ jsxs("legend", {
+					id: `${groupId}-label`,
+					className: "puzzle-radio-group__legend",
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "puzzle-radio-group__required",
+						"aria-hidden": "true",
+						children: "*"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "puzzle-radio-group__options",
+					"data-orientation": orientation,
+					children
+				}),
+				description != null && /* @__PURE__ */ jsx("div", {
+					id: descriptionId,
+					className: "puzzle-radio-group__description",
+					children: description
+				}),
+				errorState.hasError && /* @__PURE__ */ jsx("div", {
+					id: errorId,
+					className: "puzzle-radio-group__error",
+					role: "alert",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					children: errorState.errorContent
+				})
+			]
+		})
+	});
+};
+const RadioGroup = RadioGroupRoot;
+export { Radio, RadioGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/radio-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/radio-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  Fragment,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { useRovingFocus, type UseRovingFocusReturn } from \"@puzzle-ui/hooks\";\n\nimport type {\n  RadioGroupOrientation,\n  RadioGroupProps,\n  RadioGroupSize,\n  RadioProps,\n} from \"./radio-group.types\";\n\nimport { mergeDescribedBy, resolveRadioGroupError } from \"./radio-group.utils\";\n\nimport \"./radio-group.css\";\n\ntype RadioGroupContextValue = {\n  value: string | undefined;\n  name: string | undefined;\n  form: string | undefined;\n  disabled: boolean;\n  required: boolean;\n  requiredValue: string | undefined;\n  orientation: RadioGroupOrientation;\n  size: RadioGroupSize;\n  invalid: boolean;\n  describedBy: string | undefined;\n  keyboardNavigationRef: { current: boolean };\n  rovingFocus: UseRovingFocusReturn<HTMLInputElement>;\n  selectValue: (value: string) => void;\n};\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nconst useRadioGroupContext = () => {\n  const context = useContext(RadioGroupContext);\n\n  if (!context) {\n    throw new Error(\"Radio must be rendered inside a RadioGroup.\");\n  }\n\n  return context;\n};\n\nconst Radio = ({\n  value,\n  label,\n  children,\n  description,\n  disabled = false,\n  className,\n  style,\n  id,\n  ref,\n  onChange,\n  onFocus,\n  onKeyDown,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...inputProps\n}: RadioProps) => {\n  const context = useRadioGroupContext();\n\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const descriptionId =\n    description != null ? `${inputId}-description` : undefined;\n\n  const radioLabel = label ?? children;\n  const labelId = radioLabel != null ? `${inputId}-label` : undefined;\n\n  const isDisabled = context.disabled || disabled;\n  const isSelected = context.value === value;\n\n  const isRequired =\n    Boolean(context.name) &&\n    context.required &&\n    context.requiredValue === value;\n\n  const describedBy = mergeDescribedBy(\n    context.describedBy,\n    ariaDescribedBy,\n    descriptionId,\n  );\n\n  const rovingRef = context.rovingFocus.getItemRef(value);\n\n  const setInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      rovingRef(node);\n\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref, rovingRef],\n  );\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    context.rovingFocus.onItemFocus(value);\n\n    if (context.keyboardNavigationRef.current) {\n      context.keyboardNavigationRef.current = false;\n      context.selectValue(value);\n    }\n\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || isDisabled) {\n      return;\n    }\n\n    const isHorizontalArrow =\n      event.key === \"ArrowLeft\" || event.key === \"ArrowRight\";\n\n    const isVerticalArrow =\n      event.key === \"ArrowUp\" || event.key === \"ArrowDown\";\n\n    const isArrowKey = isHorizontalArrow || isVerticalArrow;\n\n    const isSupportedArrow =\n      context.orientation === \"horizontal\"\n        ? isHorizontalArrow\n        : isVerticalArrow;\n\n    // Prevent the browser's native radio navigation from\n    // moving focus in the wrong orientation.\n    if (isArrowKey && !isSupportedArrow) {\n      event.preventDefault();\n      return;\n    }\n\n    const activeElement = event.currentTarget.ownerDocument.activeElement;\n\n    context.keyboardNavigationRef.current = true;\n\n    context.rovingFocus.onItemKeyDown(event, value);\n\n    // The focus event normally consumes this flag. If focus\n    // did not change (e.g. one-item group), clear it here.\n    if (event.currentTarget.ownerDocument.activeElement === activeElement) {\n      context.keyboardNavigationRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n\n    if (!event.defaultPrevented) {\n      context.selectValue(value);\n    }\n  };\n\n  return (\n    <label\n      className={cn(\n        \"puzzle-radio\",\n        `puzzle-radio--${context.size}`,\n        isSelected && \"puzzle-radio--checked\",\n        isDisabled && \"puzzle-radio--disabled\",\n        className,\n      )}\n      style={style}\n      data-state={isSelected ? \"checked\" : \"unchecked\"}\n      data-disabled={isDisabled ? \"true\" : undefined}\n    >\n      <input\n        {...inputProps}\n        ref={setInputRef}\n        id={inputId}\n        className=\"puzzle-radio__input\"\n        type=\"radio\"\n        name={context.name}\n        form={context.form}\n        value={value}\n        checked={isSelected}\n        disabled={isDisabled}\n        required={isRequired}\n        tabIndex={context.rovingFocus.getItemTabIndex(value, isDisabled)}\n        // The wrapping label also contains the description; name the radio by\n        // its label text only and expose the description via aria-describedby.\n        aria-labelledby={\n          inputProps[\"aria-labelledby\"] ??\n          (inputProps[\"aria-label\"] ? undefined : labelId)\n        }\n        aria-describedby={describedBy}\n        aria-invalid={context.invalid ? true : ariaInvalid}\n        data-state={isSelected ? \"checked\" : \"unchecked\"}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n      />\n\n      <span className=\"puzzle-radio__control\" aria-hidden=\"true\" />\n\n      {(radioLabel != null || description != null) && (\n        <span className=\"puzzle-radio__content\">\n          {radioLabel != null && (\n            <span id={labelId} className=\"puzzle-radio__label\">\n              {radioLabel}\n            </span>\n          )}\n\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-radio__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\ntype RadioElement = ReactElement<RadioProps, typeof Radio>;\n\nconst isRadioElement = (child: ReactNode): child is RadioElement =>\n  isValidElement<RadioProps>(child) && child.type === Radio;\n\nconst getRadioElements = (children: ReactNode): RadioElement[] =>\n  Children.toArray(children).flatMap((child): RadioElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getRadioElements(child.props.children);\n    }\n\n    return isRadioElement(child) ? [child] : [];\n  });\n\nconst RadioGroupRoot = ({\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  form,\n  label,\n  description,\n  error,\n  invalid,\n  required = false,\n  disabled = false,\n  orientation = \"vertical\",\n  size = \"md\",\n  dir = \"ltr\",\n  loop = true,\n  children,\n  id,\n  className,\n  style,\n  role,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...rootProps\n}: RadioGroupProps): ReactElement => {\n  const generatedId = useId();\n  const groupId = id ?? generatedId;\n\n  const descriptionId =\n    description != null ? `${groupId}-description` : undefined;\n\n  const errorState = resolveRadioGroupError(error, invalid);\n\n  const errorId = errorState.hasError ? `${groupId}-error` : undefined;\n\n  const describedBy = mergeDescribedBy(ariaDescribedBy, descriptionId, errorId);\n\n  const groupName = name?.trim() || undefined;\n\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    string | undefined\n  >(() => defaultValue);\n\n  const isControlled = value !== undefined;\n\n  const selectedValue = isControlled ? (value ?? undefined) : uncontrolledValue;\n\n  const radioElements = getRadioElements(children);\n\n  const seenValues = new Set<string>();\n\n  for (const radio of radioElements) {\n    const radioValue = radio.props.value;\n\n    if (seenValues.has(radioValue)) {\n      throw new Error(\"RadioGroup radio values must be unique.\");\n    }\n\n    seenValues.add(radioValue);\n  }\n\n  const firstEnabledValue = radioElements.find(\n    (radio) => !disabled && !radio.props.disabled,\n  )?.props.value;\n\n  const selectedFocusValue =\n    radioElements.find(\n      (radio) =>\n        radio.props.value === selectedValue &&\n        !disabled &&\n        !radio.props.disabled,\n    )?.props.value ?? firstEnabledValue;\n\n  const focusItems = radioElements.map((radio) => ({\n    id: radio.props.value,\n    disabled: disabled || radio.props.disabled,\n  }));\n\n  const rovingFocus = useRovingFocus<HTMLInputElement>({\n    items: focusItems,\n    orientation,\n    dir,\n    loop,\n    initialActiveId: selectedFocusValue,\n  });\n\n  useEffect(() => {\n    if (selectedFocusValue !== undefined) {\n      rovingFocus.onItemFocus(selectedFocusValue);\n    }\n  }, [selectedFocusValue, rovingFocus.onItemFocus]);\n\n  const keyboardNavigationRef = useRef(false);\n\n  const selectValue = useCallback(\n    (nextValue: string) => {\n      if (selectedValue === nextValue) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    },\n    [isControlled, onValueChange, selectedValue],\n  );\n\n  const contextValue: RadioGroupContextValue = {\n    value: selectedValue,\n    name: groupName,\n    form,\n    disabled,\n    required,\n    requiredValue: firstEnabledValue,\n    orientation,\n    size,\n    invalid: errorState.isInvalid,\n    describedBy,\n    keyboardNavigationRef,\n    rovingFocus,\n    selectValue,\n  };\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <fieldset\n        {...rootProps}\n        id={groupId}\n        form={form}\n        disabled={disabled}\n        className={cn(\"puzzle-radio-group\", className)}\n        style={style}\n        role={role ?? \"radiogroup\"}\n        dir={dir}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={errorState.isInvalid ? true : ariaInvalid}\n        aria-required={required || undefined}\n        aria-disabled={disabled || undefined}\n        data-orientation={orientation}\n        data-disabled={disabled ? \"true\" : undefined}\n        data-invalid={errorState.isInvalid ? \"true\" : undefined}\n        data-size={size}\n      >\n        {label != null && (\n          <legend\n            id={`${groupId}-label`}\n            className=\"puzzle-radio-group__legend\"\n          >\n            {label}\n\n            {required && (\n              <span className=\"puzzle-radio-group__required\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </legend>\n        )}\n\n        <div\n          className=\"puzzle-radio-group__options\"\n          data-orientation={orientation}\n        >\n          {children}\n        </div>\n\n        {description != null && (\n          <div id={descriptionId} className=\"puzzle-radio-group__description\">\n            {description}\n          </div>\n        )}\n\n        {errorState.hasError && (\n          <div\n            id={errorId}\n            className=\"puzzle-radio-group__error\"\n            role=\"alert\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {errorState.errorContent}\n          </div>\n        )}\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n};\n\nconst RadioGroup = RadioGroupRoot;\n\nexport {\n  RadioGroup,\n  Radio,\n  type RadioGroupProps,\n  type RadioProps,\n  type RadioGroupOrientation,\n  type RadioGroupSize,\n};\n"],"mappings":"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"}