@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/dist/_chunk/radio.jsx

@@ -0,0 +1,319 @@
+import { t as createPress } from "./createPress.jsx";
+import { i as access, o as mergeProps, t as isDevEnv } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { a as getEventTarget, t as focusSafely } from "./focus.jsx";
+import { t as createFocusWithin } from "./createFocusWithin.jsx";
+import { n as createFocusable } from "./createFocusable.jsx";
+import { a as useLocale } from "./createCollator.jsx";
+import { createId as createId$1, createSlotId } from "../ssr/index.jsx";
+import { t as createField } from "./createField.jsx";
+import { createEffect } from "solid-js";
+import { createRadioGroupState, radioGroupSyncVersion, radioGroupSyncVersion as radioGroupSyncVersion$1 } from "@proyecto-viviana/solid-stately";
+//#region src/radio/createRadioGroup.ts
+const radioGroupData = /* @__PURE__ */ new WeakMap();
+/**
+* Provides the behavior and accessibility implementation for a radio group component.
+* Radio groups allow users to select a single item from a list of mutually exclusive options.
+*/
+function createRadioGroup(props, state) {
+	const getProps = () => access(props);
+	const locale = useLocale();
+	const orientation = () => getProps().orientation ?? "vertical";
+	const isReadOnly = () => getProps().isReadOnly ?? false;
+	const isRequired = () => getProps().isRequired ?? false;
+	const isDisabled = () => getProps().isDisabled ?? false;
+	const validationBehavior = () => getProps().validationBehavior ?? "native";
+	const displayValidation = () => state.displayValidation();
+	const validationErrors = () => displayValidation().validationErrors;
+	const validationDetails = () => displayValidation().validationDetails;
+	const isInvalid = () => displayValidation().isInvalid;
+	const fallbackErrorMessage = () => {
+		const errors = validationErrors();
+		return errors.length > 0 ? errors : void 0;
+	};
+	const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
+		get id() {
+			return getProps().id;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage ?? fallbackErrorMessage();
+		},
+		get isInvalid() {
+			return isInvalid();
+		},
+		labelElementType: "span"
+	});
+	const { focusWithinProps } = createFocusWithin({
+		onBlurWithin(e) {
+			getProps().onBlur?.(e);
+			if (!state.selectedValue()) state.setLastFocusedValue(null);
+		},
+		onFocusWithin: (e) => getProps().onFocus?.(e),
+		onFocusWithinChange: (isFocused) => getProps().onFocusChange?.(isFocused)
+	});
+	const domProps = () => filterDOMProps(getProps(), { labelable: true });
+	const groupName = getProps().name ?? createId$1();
+	radioGroupData.set(state, {
+		name: groupName,
+		form: getProps().form,
+		descriptionId: descriptionProps.id,
+		errorMessageId: errorMessageProps.id,
+		validationBehavior: validationBehavior()
+	});
+	const getNavigableRadios = (root) => {
+		return Array.from(root.querySelectorAll("input[type=\"radio\"]")).filter((el) => {
+			return el instanceof HTMLInputElement && !el.matches(":disabled");
+		});
+	};
+	const onKeyDown = (e) => {
+		let nextDir = null;
+		const isHorizontal = orientation() !== "vertical";
+		const isRTL = locale().direction === "rtl" && isHorizontal;
+		switch (e.key) {
+			case "ArrowRight":
+				nextDir = isRTL ? "prev" : "next";
+				break;
+			case "ArrowLeft":
+				nextDir = isRTL ? "next" : "prev";
+				break;
+			case "ArrowDown":
+				nextDir = "next";
+				break;
+			case "ArrowUp":
+				nextDir = "prev";
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		const root = e.currentTarget;
+		if (!(root instanceof HTMLElement)) return;
+		const radios = getNavigableRadios(root);
+		if (radios.length === 0) return;
+		const eventTarget = getEventTarget(e);
+		const activeElement = root.ownerDocument.activeElement;
+		const currentRadio = eventTarget instanceof HTMLInputElement && eventTarget.type === "radio" ? eventTarget : activeElement instanceof HTMLInputElement && activeElement.type === "radio" ? activeElement : null;
+		const currentIndex = currentRadio ? radios.indexOf(currentRadio) : -1;
+		let nextIndex;
+		if (nextDir === "next") nextIndex = currentIndex >= 0 ? (currentIndex + 1) % radios.length : 0;
+		else nextIndex = currentIndex >= 0 ? (currentIndex - 1 + radios.length) % radios.length : radios.length - 1;
+		const nextRadio = radios[nextIndex];
+		if (!nextRadio) return;
+		focusSafely(nextRadio);
+		state.setSelectedValue(nextRadio.value);
+	};
+	return {
+		get radioGroupProps() {
+			return mergeProps(domProps(), focusWithinProps, {
+				role: "radiogroup",
+				onKeyDown,
+				"aria-invalid": isInvalid() || void 0,
+				"aria-errormessage": getProps()["aria-errormessage"],
+				"aria-readonly": isReadOnly() || void 0,
+				"aria-required": isRequired() || void 0,
+				"aria-disabled": isDisabled() || void 0,
+				"aria-orientation": orientation(),
+				...fieldProps
+			});
+		},
+		labelProps,
+		descriptionProps,
+		errorMessageProps,
+		get isInvalid() {
+			return isInvalid();
+		},
+		get validationErrors() {
+			return validationErrors();
+		},
+		get validationDetails() {
+			return validationDetails();
+		}
+	};
+}
+//#endregion
+//#region src/radio/createRadio.ts
+/**
+* Radio hook for Solidaria
+*
+* Provides the behavior and accessibility implementation for an individual
+* radio button in a radio group.
+*
+* This is a 1:1 port of @react-aria/radio's useRadio hook.
+*/
+/**
+* Provides the behavior and accessibility implementation for an individual
+* radio button in a radio group.
+*/
+function createRadio(props, state, ref) {
+	const getProps = () => access(props);
+	const isDisabled = () => getProps().isDisabled || state.isDisabled;
+	const value = () => getProps().value;
+	const isSelected = () => {
+		return state.selectedValue() === value();
+	};
+	createEffect(() => {
+		const p = getProps();
+		const hasChildren = p.children != null;
+		const hasAriaLabel = p["aria-label"] != null || p["aria-labelledby"] != null;
+		if (!hasChildren && !hasAriaLabel && isDevEnv()) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+	});
+	createEffect(() => {
+		radioGroupSyncVersion.get(state)?.();
+		const shouldBeChecked = isSelected();
+		const inputEl = ref();
+		if (!inputEl) return;
+		if (inputEl.checked !== shouldBeChecked) inputEl.checked = shouldBeChecked;
+	});
+	const onChange = (e) => {
+		e.stopPropagation();
+		const target = e.target;
+		if (isDisabled()) {
+			target.checked = isSelected();
+			return;
+		}
+		state.setSelectedValue(value());
+		target.focus();
+		target.checked = isSelected();
+	};
+	const { pressProps, isPressed } = createPress({
+		get onPressStart() {
+			return getProps().onPressStart;
+		},
+		get onPressEnd() {
+			return getProps().onPressEnd;
+		},
+		get onPressChange() {
+			return getProps().onPressChange;
+		},
+		get onPress() {
+			return getProps().onPress;
+		},
+		get onPressUp() {
+			return getProps().onPressUp;
+		},
+		get onClick() {
+			return getProps().onClick;
+		},
+		get isDisabled() {
+			return isDisabled();
+		}
+	});
+	const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
+		get onPressStart() {
+			return getProps().onPressStart;
+		},
+		get onPressEnd() {
+			return getProps().onPressEnd;
+		},
+		get onPressChange() {
+			return getProps().onPressChange;
+		},
+		get onPressUp() {
+			return getProps().onPressUp;
+		},
+		get onClick() {
+			return getProps().onClick;
+		},
+		onPress(e) {
+			getProps().onPress?.(e);
+			state.setSelectedValue(value());
+			ref()?.focus();
+		},
+		get isDisabled() {
+			return isDisabled();
+		}
+	});
+	const { focusableProps } = createFocusable({
+		get isDisabled() {
+			return isDisabled();
+		},
+		get autoFocus() {
+			return getProps().autoFocus;
+		},
+		onFocus(e) {
+			getProps().onFocus?.(e);
+			state.setLastFocusedValue(value());
+		},
+		get onBlur() {
+			return getProps().onBlur;
+		},
+		get onFocusChange() {
+			return getProps().onFocusChange;
+		},
+		get onKeyDown() {
+			return getProps().onKeyDown;
+		},
+		get onKeyUp() {
+			return getProps().onKeyUp;
+		}
+	}, ref);
+	const interactions = mergeProps(pressProps, focusableProps);
+	const domProps = () => filterDOMProps(getProps(), { labelable: true });
+	const getTabIndex = () => {
+		if (isDisabled()) return;
+		const selected = state.selectedValue();
+		const lastFocused = state.lastFocusedValue();
+		const currentValue = value();
+		if (selected != null) {
+			if (selected === currentValue) return 0;
+			return -1;
+		} else {
+			if (lastFocused === currentValue || lastFocused == null) return 0;
+			return -1;
+		}
+	};
+	const getGroupData = () => radioGroupData.get(state);
+	const combinedIsPressed = () => isPressed() || isLabelPressed();
+	const descriptionId = createSlotId();
+	return {
+		labelProps: mergeProps(labelPressProps, {
+			onClick: (e) => e.preventDefault(),
+			onMouseDown: (e) => e.preventDefault()
+		}),
+		get inputProps() {
+			const p = getProps();
+			const groupData = getGroupData();
+			const describedByIds = [];
+			if (p["aria-describedby"]) describedByIds.push(p["aria-describedby"]);
+			const ownDescriptionId = descriptionId();
+			if (ownDescriptionId) describedByIds.push(ownDescriptionId);
+			if (state.isInvalid && groupData?.errorMessageId) describedByIds.push(groupData.errorMessageId);
+			if (groupData?.descriptionId) describedByIds.push(groupData.descriptionId);
+			const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
+			const validationBehavior = groupData?.validationBehavior ?? "native";
+			return mergeProps(domProps(), interactions, {
+				type: "radio",
+				name: groupData?.name,
+				form: groupData?.form,
+				tabIndex: getTabIndex(),
+				disabled: isDisabled(),
+				required: validationBehavior === "native" ? state.isRequired : void 0,
+				checked: isSelected(),
+				value: value(),
+				onChange,
+				"aria-describedby": ariaDescribedBy
+			});
+		},
+		get descriptionProps() {
+			return { id: descriptionId() };
+		},
+		isDisabled: isDisabled(),
+		isSelected,
+		isPressed: combinedIsPressed
+	};
+}
+//#endregion
+export { radioGroupData as a, createRadioGroup as i, radioGroupSyncVersion$1 as n, createRadio as r, createRadioGroupState as t };
+
+//# sourceMappingURL=radio.jsx.map

package/dist/_chunk/radio.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.jsx","names":["createId"],"sources":["../../src/radio/createRadioGroup.ts","../../src/radio/createRadio.ts"],"sourcesContent":["/**\n * Radio group hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a radio group component.\n * Radio groups allow users to select a single item from a list of mutually exclusive options.\n *\n * This is a 1:1 port of @react-aria/radio's useRadioGroup hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField } from \"../label/createField\";\nimport { createFocusWithin } from \"../interactions/createFocusWithin\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { focusSafely, getEventTarget } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { createId } from \"../ssr\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { type RadioGroupState, type ValidityState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaRadioGroupProps {\n  /** The content to display as the label. */\n  label?: JSX.Element;\n  /** A description for the radio group. Provides additional context. */\n  description?: JSX.Element;\n  /** An error message for the radio group. */\n  errorMessage?:\n    | JSX.Element\n    | ((validation: { isInvalid: boolean; validationErrors: string[] }) => JSX.Element);\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is read only. */\n  isReadOnly?: boolean;\n  /** Whether the radio group is required. */\n  isRequired?: boolean;\n  /** Whether the radio group is invalid. */\n  isInvalid?: boolean;\n  /** The axis the Radio Button(s) should align with. Defaults to 'vertical'. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The name of the radio group, used when submitting an HTML form. */\n  name?: string;\n  /** The form to associate the radio group with. */\n  form?: string;\n  /** Validation behavior for the radio group. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** Handler that is called when the radio group receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the radio group loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the radio group's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide an error message for the object. */\n  \"aria-errormessage\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n}\n\nexport interface RadioGroupAria {\n  /** Props for the radio group wrapper element. */\n  radioGroupProps: JSX.HTMLAttributes<HTMLDivElement>;\n  /** Props for the radio group's visible label (if any). */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the radio group description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the radio group error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Whether the radio group is invalid. */\n  isInvalid: boolean;\n  /** Validation errors, if any. */\n  validationErrors: string[];\n  /** Validation details, if any. */\n  validationDetails: ValidityState;\n}\n\n// WeakMap to share data between radio group and radio items\ninterface RadioGroupData {\n  name: string;\n  form: string | undefined;\n  descriptionId: string | undefined;\n  errorMessageId: string | undefined;\n  validationBehavior: \"aria\" | \"native\";\n}\n\nexport const radioGroupData: WeakMap<RadioGroupState, RadioGroupData> = new WeakMap();\n\n/**\n * Provides the behavior and accessibility implementation for a radio group component.\n * Radio groups allow users to select a single item from a list of mutually exclusive options.\n */\nexport function createRadioGroup(\n  props: MaybeAccessor<AriaRadioGroupProps>,\n  state: RadioGroupState,\n): RadioGroupAria {\n  const getProps = () => access(props);\n  const locale = useLocale();\n\n  const orientation = () => getProps().orientation ?? \"vertical\";\n  const isReadOnly = () => getProps().isReadOnly ?? false;\n  const isRequired = () => getProps().isRequired ?? false;\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const validationBehavior = () => getProps().validationBehavior ?? \"native\";\n  const displayValidation = () => state.displayValidation();\n  const validationErrors = () => displayValidation().validationErrors;\n  const validationDetails = () => displayValidation().validationDetails;\n  const isInvalid = () => displayValidation().isInvalid;\n  const fallbackErrorMessage = () => {\n    const errors = validationErrors();\n    return errors.length > 0 ? errors : undefined;\n  };\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({\n    get id() {\n      return getProps().id;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    get description() {\n      return getProps().description;\n    },\n    get errorMessage() {\n      return getProps().errorMessage ?? fallbackErrorMessage();\n    },\n    get isInvalid() {\n      return isInvalid();\n    },\n    // Radio group is not an HTML input element so it\n    // shouldn't be labeled by a <label> element.\n    labelElementType: \"span\",\n  });\n\n  // Handle focus within - reset focusable radio when group loses focus and no selection\n  const { focusWithinProps } = createFocusWithin({\n    onBlurWithin(e: FocusEvent) {\n      getProps().onBlur?.(e);\n      if (!state.selectedValue()) {\n        state.setLastFocusedValue(null);\n      }\n    },\n    onFocusWithin: (e: FocusEvent) => getProps().onFocus?.(e),\n    onFocusWithinChange: (isFocused: boolean) => getProps().onFocusChange?.(isFocused),\n  });\n\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  const groupName = getProps().name ?? createId();\n\n  radioGroupData.set(state, {\n    name: groupName,\n    form: getProps().form,\n    descriptionId: descriptionProps.id,\n    errorMessageId: errorMessageProps.id,\n    validationBehavior: validationBehavior(),\n  });\n\n  const getNavigableRadios = (root: HTMLElement): HTMLInputElement[] => {\n    return Array.from(root.querySelectorAll('input[type=\"radio\"]')).filter(\n      (el): el is HTMLInputElement => {\n        return el instanceof HTMLInputElement && !el.matches(\":disabled\");\n      },\n    );\n  };\n\n  // Keyboard navigation parity with React Aria.\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (e) => {\n    let nextDir: \"next\" | \"prev\" | null = null;\n    const currentOrientation = orientation();\n    const isHorizontal = currentOrientation !== \"vertical\";\n    const isRTL = locale().direction === \"rtl\" && isHorizontal;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        nextDir = isRTL ? \"prev\" : \"next\";\n        break;\n      case \"ArrowLeft\":\n        nextDir = isRTL ? \"next\" : \"prev\";\n        break;\n      case \"ArrowDown\":\n        nextDir = \"next\";\n        break;\n      case \"ArrowUp\":\n        nextDir = \"prev\";\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n\n    const root = e.currentTarget;\n    if (!(root instanceof HTMLElement)) {\n      return;\n    }\n\n    const radios = getNavigableRadios(root);\n    if (radios.length === 0) {\n      return;\n    }\n\n    const eventTarget = getEventTarget<Element>(e);\n    const activeElement = root.ownerDocument.activeElement;\n\n    const currentRadio =\n      eventTarget instanceof HTMLInputElement && eventTarget.type === \"radio\"\n        ? eventTarget\n        : activeElement instanceof HTMLInputElement && activeElement.type === \"radio\"\n          ? activeElement\n          : null;\n\n    const currentIndex = currentRadio ? radios.indexOf(currentRadio) : -1;\n\n    let nextIndex: number;\n    if (nextDir === \"next\") {\n      nextIndex = currentIndex >= 0 ? (currentIndex + 1) % radios.length : 0;\n    } else {\n      nextIndex =\n        currentIndex >= 0 ? (currentIndex - 1 + radios.length) % radios.length : radios.length - 1;\n    }\n\n    const nextRadio = radios[nextIndex];\n    if (!nextRadio) {\n      return;\n    }\n\n    focusSafely(nextRadio);\n    state.setSelectedValue(nextRadio.value);\n  };\n\n  return {\n    get radioGroupProps() {\n      return mergeProps(domProps(), focusWithinProps as unknown as Record<string, unknown>, {\n        role: \"radiogroup\",\n        onKeyDown,\n        \"aria-invalid\": isInvalid() || undefined,\n        \"aria-errormessage\": getProps()[\"aria-errormessage\"],\n        \"aria-readonly\": isReadOnly() || undefined,\n        \"aria-required\": isRequired() || undefined,\n        \"aria-disabled\": isDisabled() || undefined,\n        \"aria-orientation\": orientation(),\n        ...fieldProps,\n      }) as JSX.HTMLAttributes<HTMLDivElement>;\n    },\n    labelProps: labelProps as JSX.HTMLAttributes<HTMLElement>,\n    descriptionProps,\n    errorMessageProps,\n    get isInvalid() {\n      return isInvalid();\n    },\n    get validationErrors() {\n      return validationErrors();\n    },\n    get validationDetails() {\n      return validationDetails();\n    },\n  };\n}\n","/**\n * Radio hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for an individual\n * radio button in a radio group.\n *\n * This is a 1:1 port of @react-aria/radio's useRadio hook.\n */\n\nimport { JSX, Accessor, createEffect } from \"solid-js\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\nimport { createSlotId } from \"../ssr\";\nimport { type RadioGroupState, radioGroupSyncVersion } from \"@proyecto-viviana/solid-stately\";\nimport { radioGroupData } from \"./createRadioGroup\";\nimport { type PressEvent } from \"../interactions/PressEvent\";\n\nexport interface AriaRadioProps {\n  /** The value of the radio button, used when submitting an HTML form. */\n  value: string;\n  /** Whether the radio button is disabled. */\n  isDisabled?: boolean;\n  /** The label for the radio button. */\n  children?: JSX.Element;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Handler that is called when the press is released over the target. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */\n  onPressEnd?: (e: PressEvent) => void;\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */\n  onPressUp?: (e: PressEvent) => void;\n  /** Handler that is called when the element is clicked. */\n  onClick?: (e: MouseEvent) => void;\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n  /** Whether to autofocus the element. */\n  autoFocus?: boolean;\n}\n\nexport interface RadioAria {\n  /** Props for the label wrapper element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the radio's description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Whether the radio is disabled. */\n  isDisabled: boolean;\n  /** Whether the radio is currently selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the radio is in a pressed state. */\n  isPressed: Accessor<boolean>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for an individual\n * radio button in a radio group.\n */\nexport function createRadio(\n  props: MaybeAccessor<AriaRadioProps>,\n  state: RadioGroupState,\n  ref: () => HTMLInputElement | null,\n): RadioAria {\n  const getProps = () => access(props);\n\n  const isDisabled = () => getProps().isDisabled || state.isDisabled;\n  const value = () => getProps().value;\n  const isSelected: Accessor<boolean> = () => {\n    const selected = state.selectedValue();\n    const v = value();\n    return selected === v;\n  };\n\n  createEffect(() => {\n    const p = getProps();\n    const hasChildren = p.children != null;\n    const hasAriaLabel = p[\"aria-label\"] != null || p[\"aria-labelledby\"] != null;\n    if (!hasChildren && !hasAriaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide children, you must specify an aria-label for accessibility\",\n      );\n    }\n  });\n\n  // SolidJS-specific: Sync DOM checked state whenever selection changes\n  // This handles:\n  // 1. Initial render with controlled value\n  // 2. Controlled mode where parent doesn't update value after click\n  // 3. Native radio group behavior (clicking one unchecks others)\n  //\n  // Unlike React's VDOM reconciliation that re-applies all props on every render,\n  // SolidJS only updates when signals change. Native radio behavior can change\n  // the DOM checked state without our knowledge, so we need to actively sync.\n  //\n  // We track `syncVersion` to ensure this effect runs on EVERY selection attempt,\n  // even in controlled mode where isSelected() may not change.\n  createEffect(() => {\n    // The WeakMap accessor is outside the public API to maintain React Aria parity.\n    const syncVersion = radioGroupSyncVersion.get(state);\n    syncVersion?.();\n\n    const shouldBeChecked = isSelected();\n    const inputEl = ref();\n    if (!inputEl) return;\n\n    if (inputEl.checked !== shouldBeChecked) {\n      inputEl.checked = shouldBeChecked;\n    }\n  });\n\n  // SolidJS-specific: Unlike React, the input's `checked` state can get out of sync\n  // with our reactive state. This happens because:\n  // 1. A readonly `<input type=\"radio\" />` is always \"checkable\" in the browser\n  // 2. Even controlled inputs (`<input checked={isChecked} />`) will change their\n  //    internal `checked` state when clicked, regardless of what the signal says\n  //\n  // To prevent this, we force the input's `checked` DOM property to match our state\n  // after processing the change. This is a common pattern across SolidJS component\n  // libraries (see CREDITS.md for attribution).\n  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    e.stopPropagation();\n\n    const target = e.target as HTMLInputElement;\n\n    // Guard against disabled state - JSDOM's fireEvent may bypass disabled check\n    if (isDisabled()) {\n      target.checked = isSelected();\n      return;\n    }\n\n    state.setSelectedValue(value());\n\n    // Focus the input when clicked\n    // In real browsers this happens automatically, but JSDOM/fireEvent doesn't trigger it\n    target.focus();\n\n    // Force the DOM checked state to match our reactive state\n    // This handles controlled mode where the parent might not update the value\n    target.checked = isSelected();\n  };\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  const { pressProps, isPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    onPress(e: PressEvent) {\n      getProps().onPress?.(e);\n      state.setSelectedValue(value());\n      ref()?.focus();\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return isDisabled();\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      onFocus(e: FocusEvent) {\n        getProps().onFocus?.(e);\n        state.setLastFocusedValue(value());\n      },\n      get onBlur() {\n        return getProps().onBlur;\n      },\n      get onFocusChange() {\n        return getProps().onFocusChange;\n      },\n      get onKeyDown() {\n        return getProps().onKeyDown;\n      },\n      get onKeyUp() {\n        return getProps().onKeyUp;\n      },\n    },\n    ref as unknown as (el: HTMLElement) => void,\n  );\n\n  const interactions = mergeProps(pressProps, focusableProps);\n\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  const getTabIndex = (): number | undefined => {\n    if (isDisabled()) {\n      return undefined;\n    }\n\n    const selected = state.selectedValue();\n    const lastFocused = state.lastFocusedValue();\n    const currentValue = value();\n\n    if (selected != null) {\n      if (selected === currentValue) {\n        return 0;\n      }\n      return -1;\n    } else {\n      if (lastFocused === currentValue || lastFocused == null) {\n        return 0;\n      }\n      return -1;\n    }\n  };\n\n  const getGroupData = () => radioGroupData.get(state);\n\n  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();\n\n  // The radio's own description slot id — resolves only once an element with\n  // this id is rendered (e.g. a `<Text slot=\"description\">` child).\n  const descriptionId = createSlotId();\n\n  return {\n    labelProps: mergeProps(labelPressProps, {\n      onClick: (e: MouseEvent) => e.preventDefault(),\n      onMouseDown: (e: MouseEvent) => e.preventDefault(),\n    }),\n    get inputProps() {\n      const p = getProps();\n      const groupData = getGroupData();\n\n      // Order mirrors upstream useRadio: the user's aria-describedby, then the\n      // radio's own description, then the group's error message (when invalid)\n      // and the group's shared description.\n      const describedByIds: string[] = [];\n      if (p[\"aria-describedby\"]) {\n        describedByIds.push(p[\"aria-describedby\"]);\n      }\n      const ownDescriptionId = descriptionId();\n      if (ownDescriptionId) {\n        describedByIds.push(ownDescriptionId);\n      }\n      if (state.isInvalid && groupData?.errorMessageId) {\n        describedByIds.push(groupData.errorMessageId);\n      }\n      if (groupData?.descriptionId) {\n        describedByIds.push(groupData.descriptionId);\n      }\n      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n      const validationBehavior = groupData?.validationBehavior ?? \"native\";\n\n      return mergeProps(domProps(), interactions, {\n        type: \"radio\" as const,\n        name: groupData?.name,\n        form: groupData?.form,\n        tabIndex: getTabIndex(),\n        disabled: isDisabled(),\n        required: validationBehavior === \"native\" ? state.isRequired : undefined,\n        checked: isSelected(),\n        value: value(),\n        onChange,\n        \"aria-describedby\": ariaDescribedBy,\n      }) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return { id: descriptionId() };\n    },\n    isDisabled: isDisabled(),\n    isSelected,\n    isPressed: combinedIsPressed,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/searchfield.js

@@ -0,0 +1,209 @@
+import { i as access, o as mergeProps } from "./env.js";
+import { t as createTextField } from "./textfield.js";
+//#region src/searchfield/createSearchField.ts
+/**
+* Provides the behavior and accessibility implementation for a search field.
+*/
+function createSearchField(props, state, inputRef) {
+	const getProps = () => access(props);
+	const setValue = (value) => {
+		if (state.value() === value) return;
+		state.setValue(value);
+		getProps().onChange?.(value);
+	};
+	const textFieldAria = createTextField({
+		get value() {
+			return state.value();
+		},
+		get isDisabled() {
+			return getProps().isDisabled;
+		},
+		get isReadOnly() {
+			return getProps().isReadOnly;
+		},
+		get isRequired() {
+			return getProps().isRequired;
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage;
+		},
+		get placeholder() {
+			return getProps().placeholder;
+		},
+		get name() {
+			return getProps().name;
+		},
+		get form() {
+			return getProps().form;
+		},
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		get type() {
+			return getProps().type ?? "search";
+		},
+		get autoFocus() {
+			return getProps().autoFocus;
+		},
+		get excludeFromTabOrder() {
+			return getProps().excludeFromTabOrder;
+		},
+		get autoComplete() {
+			return getProps().autoComplete;
+		},
+		get inputMode() {
+			return getProps().inputMode;
+		},
+		get enterKeyHint() {
+			return getProps().enterKeyHint;
+		},
+		get autoCorrect() {
+			return getProps().autoCorrect;
+		},
+		get autoCapitalize() {
+			return getProps().autoCapitalize;
+		},
+		get spellCheck() {
+			return getProps().spellCheck;
+		},
+		get maxLength() {
+			return getProps().maxLength;
+		},
+		get minLength() {
+			return getProps().minLength;
+		},
+		get pattern() {
+			return getProps().pattern;
+		},
+		get onFocus() {
+			return getProps().onFocus;
+		},
+		get onBlur() {
+			return getProps().onBlur;
+		},
+		get onFocusChange() {
+			return getProps().onFocusChange;
+		},
+		get onKeyDown() {
+			return getProps().onKeyDown;
+		},
+		get onKeyUp() {
+			return getProps().onKeyUp;
+		},
+		get onCopy() {
+			return getProps().onCopy;
+		},
+		get onCut() {
+			return getProps().onCut;
+		},
+		get onPaste() {
+			return getProps().onPaste;
+		},
+		get onCompositionStart() {
+			return getProps().onCompositionStart;
+		},
+		get onCompositionEnd() {
+			return getProps().onCompositionEnd;
+		},
+		get onCompositionUpdate() {
+			return getProps().onCompositionUpdate;
+		},
+		get onSelect() {
+			return getProps().onSelect;
+		},
+		get onBeforeInput() {
+			return getProps().onBeforeInput;
+		},
+		get onInput() {
+			return getProps().onInput;
+		},
+		onChange: setValue
+	});
+	const onKeyDown = (e) => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) {
+			if (e.key === "Enter") e.preventDefault();
+			return;
+		}
+		if (e.key === "Enter" && p.onSubmit) {
+			e.preventDefault();
+			p.onSubmit(state.value());
+		}
+		if (e.key === "Escape") {
+			const currentValue = state.value();
+			const inputValue = inputRef?.()?.value ?? "";
+			if (currentValue !== "" || inputValue !== "") {
+				e.preventDefault();
+				e.stopPropagation();
+				const input = inputRef?.();
+				if (input) input.value = "";
+				setValue("");
+				p.onClear?.();
+			}
+		}
+	};
+	const onClearButtonClick = () => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) return;
+		const input = inputRef?.();
+		if (input) input.value = "";
+		setValue("");
+		p.onClear?.();
+		inputRef?.()?.focus();
+	};
+	const onClearButtonMouseDown = (e) => {
+		e.preventDefault();
+	};
+	return {
+		get labelProps() {
+			return textFieldAria.labelProps;
+		},
+		get inputProps() {
+			return mergeProps({
+				onKeyDown,
+				defaultValue: void 0
+			}, textFieldAria.inputProps);
+		},
+		get clearButtonProps() {
+			const p = getProps();
+			return {
+				"aria-label": "Clear search",
+				tabIndex: -1,
+				disabled: p.isDisabled || p.isReadOnly,
+				onMouseDown: onClearButtonMouseDown,
+				onClick: onClearButtonClick
+			};
+		},
+		get descriptionProps() {
+			return textFieldAria.descriptionProps;
+		},
+		get errorMessageProps() {
+			return textFieldAria.errorMessageProps;
+		},
+		get isInvalid() {
+			return textFieldAria.isInvalid;
+		}
+	};
+}
+//#endregion
+export { createSearchField as t };
+
+//# sourceMappingURL=searchfield.js.map

package/dist/_chunk/searchfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchfield.js","names":[],"sources":["../../src/searchfield/createSearchField.ts"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a search field.\n * A search field allows a user to enter and clear a search query.\n * Based on @react-aria/searchfield useSearchField.\n */\n\nimport { type JSX } from \"solid-js\";\nimport { createTextField, type AriaTextFieldProps, type TextFieldAria } from \"../textfield\";\nimport { mergeProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport type { SearchFieldState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaSearchFieldProps extends AriaTextFieldProps {\n  /** Handler that is called when the user submits the search (pressing Enter). */\n  onSubmit?: (value: string) => void;\n  /** Handler that is called when the clear button is pressed or Escape clears the field. */\n  onClear?: () => void;\n}\n\nexport interface SearchFieldAria extends Omit<TextFieldAria, \"inputProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the clear button. */\n  clearButtonProps: {\n    \"aria-label\": string;\n    tabIndex: number;\n    disabled?: boolean;\n    onMouseDown: (e: MouseEvent) => void;\n    onClick: () => void;\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a search field.\n */\nexport function createSearchField(\n  props: MaybeAccessor<AriaSearchFieldProps>,\n  state: SearchFieldState,\n  inputRef?: () => HTMLInputElement | null,\n): SearchFieldAria {\n  const getProps = () => access(props);\n\n  const setValue = (value: string) => {\n    if (state.value() === value) {\n      return;\n    }\n\n    state.setValue(value);\n    getProps().onChange?.(value);\n  };\n\n  // Use createTextField for the base implementation\n  const textFieldAria = createTextField({\n    get value() {\n      return state.value();\n    },\n    get isDisabled() {\n      return getProps().isDisabled;\n    },\n    get isReadOnly() {\n      return getProps().isReadOnly;\n    },\n    get isRequired() {\n      return getProps().isRequired;\n    },\n    get isInvalid() {\n      return getProps().isInvalid;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return getProps()[\"aria-describedby\"];\n    },\n    get description() {\n      return getProps().description;\n    },\n    get errorMessage() {\n      return getProps().errorMessage;\n    },\n    get placeholder() {\n      return getProps().placeholder;\n    },\n    get name() {\n      return getProps().name;\n    },\n    get form() {\n      return getProps().form;\n    },\n    get validationBehavior() {\n      return getProps().validationBehavior ?? \"native\";\n    },\n    get type() {\n      return getProps().type ?? \"search\";\n    },\n    get autoFocus() {\n      return getProps().autoFocus;\n    },\n    get excludeFromTabOrder() {\n      return getProps().excludeFromTabOrder;\n    },\n    get autoComplete() {\n      return getProps().autoComplete;\n    },\n    get inputMode() {\n      return getProps().inputMode;\n    },\n    get enterKeyHint() {\n      return getProps().enterKeyHint;\n    },\n    get autoCorrect() {\n      return getProps().autoCorrect;\n    },\n    get autoCapitalize() {\n      return getProps().autoCapitalize;\n    },\n    get spellCheck() {\n      return getProps().spellCheck;\n    },\n    get maxLength() {\n      return getProps().maxLength;\n    },\n    get minLength() {\n      return getProps().minLength;\n    },\n    get pattern() {\n      return getProps().pattern;\n    },\n    get onFocus() {\n      return getProps().onFocus;\n    },\n    get onBlur() {\n      return getProps().onBlur;\n    },\n    get onFocusChange() {\n      return getProps().onFocusChange;\n    },\n    get onKeyDown() {\n      return getProps().onKeyDown;\n    },\n    get onKeyUp() {\n      return getProps().onKeyUp;\n    },\n    get onCopy() {\n      return getProps().onCopy;\n    },\n    get onCut() {\n      return getProps().onCut;\n    },\n    get onPaste() {\n      return getProps().onPaste;\n    },\n    get onCompositionStart() {\n      return getProps().onCompositionStart;\n    },\n    get onCompositionEnd() {\n      return getProps().onCompositionEnd;\n    },\n    get onCompositionUpdate() {\n      return getProps().onCompositionUpdate;\n    },\n    get onSelect() {\n      return getProps().onSelect;\n    },\n    get onBeforeInput() {\n      return getProps().onBeforeInput;\n    },\n    get onInput() {\n      return getProps().onInput;\n    },\n    onChange: setValue,\n  });\n\n  // Handle keyboard events for search field\n  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    const p = getProps();\n\n    if (p.isDisabled || p.isReadOnly) {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n      }\n      return;\n    }\n\n    if (e.key === \"Enter\" && p.onSubmit) {\n      e.preventDefault();\n      p.onSubmit(state.value());\n    }\n\n    if (e.key === \"Escape\") {\n      const currentValue = state.value();\n      const inputValue = inputRef?.()?.value ?? \"\";\n\n      // Only clear if there's a value\n      if (currentValue !== \"\" || inputValue !== \"\") {\n        e.preventDefault();\n        e.stopPropagation();\n        const input = inputRef?.();\n        if (input) {\n          input.value = \"\";\n        }\n        setValue(\"\");\n        p.onClear?.();\n      }\n    }\n  };\n\n  // Handle clear button click\n  const onClearButtonClick = () => {\n    const p = getProps();\n    if (p.isDisabled || p.isReadOnly) return;\n    const input = inputRef?.();\n    if (input) {\n      input.value = \"\";\n    }\n    setValue(\"\");\n    p.onClear?.();\n    // Focus the input after clearing\n    inputRef?.()?.focus();\n  };\n\n  // Prevent focus from leaving input on mobile when clicking clear button\n  const onClearButtonMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n  };\n\n  return {\n    get labelProps() {\n      return textFieldAria.labelProps;\n    },\n    get inputProps() {\n      return mergeProps(\n        {\n          onKeyDown,\n          // Clear defaultValue since it's handled by state\n          defaultValue: undefined,\n        } as Record<string, unknown>,\n        textFieldAria.inputProps as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get clearButtonProps() {\n      const p = getProps();\n      const isDisabled = p.isDisabled || p.isReadOnly;\n\n      return {\n        \"aria-label\": \"Clear search\",\n        tabIndex: -1, // Exclude from tab order\n        disabled: isDisabled,\n        onMouseDown: onClearButtonMouseDown,\n        onClick: onClearButtonClick,\n      };\n    },\n    get descriptionProps() {\n      return textFieldAria.descriptionProps;\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n  };\n}\n"],"mappings":"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"}