@accelint/design-toolkit 9.3.0 → 9.4.0

package/dist/components/query-builder/rule.js

@@ -21,6 +21,7 @@ import { TestID, useRule, useStopEventPropagation } from "react-querybuilder";
 import styles from "./styles.module.css";
 
 //#region src/components/query-builder/rule.tsx
+/** Renders connecting lines between rules in a query builder */
 const QueryBuilderLines = memo(function QueryBuilderLines$1({ path, props, context }) {
 	return /* @__PURE__ */ jsx(Lines, {
 		variant: path[0] === props.schema.getQuery()?.rules.length - 1 ? "last" : "branch",
@@ -29,6 +30,23 @@ const QueryBuilderLines = memo(function QueryBuilderLines$1({ path, props, conte
 		className: styles.ruleLines
 	});
 });
+/**
+* Rule - Individual rule component with field, operator, and value
+*
+* Renders the field selector, operator selector, value editor, and action buttons.
+*
+* @example
+* ```tsx
+* <Rule
+*   rule={{ field: 'name', operator: 'equals', value: 'John' }}
+*   path={[0]}
+*   schema={queryBuilderSchema}
+* />
+* ```
+*
+* @param props - RuleProps from react-querybuilder.
+* @returns The rendered Rule component with all selectors and actions.
+*/
 function Rule(props) {
 	const rule = useRule(props);
 	const context = useContext(props.context);

package/dist/components/query-builder/rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"rule.js","names":["QueryBuilderLines","context: QueryBuilderContextType"],"sources":["../../../src/components/query-builder/rule.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { memo, useContext } from 'react';\nimport {\n  type Path,\n  type RuleProps,\n  TestID,\n  useRule,\n  useStopEventPropagation,\n} from 'react-querybuilder';\nimport { Lines } from '../lines';\nimport styles from './styles.module.css';\nimport type { QueryBuilderContextType } from './types';\n\nconst QueryBuilderLines = memo(function QueryBuilderLines({\n  path,\n  props,\n  context,\n}: {\n  path: Path;\n  props: RuleProps;\n  context: QueryBuilderContextType;\n}) {\n  const isLastRule = path[0] === props.schema.getQuery()?.rules.length - 1;\n  const line = isLastRule ? 'last' : 'branch';\n\n  return (\n    <Lines\n      variant={line}\n      size='small'\n      isVisible={context.showRuleLines}\n      className={styles.ruleLines}\n    />\n  );\n});\n\nexport function Rule(props: RuleProps) {\n  const rule = useRule(props);\n  const context: QueryBuilderContextType = useContext(props.context);\n\n  const {\n    classNames,\n    disabled,\n    operators,\n    outerClassName,\n    rule: { field, operator, value, valueSource },\n    schema: {\n      controls: {\n        fieldSelector: FieldSelectorControlElement,\n        operatorSelector: OperatorSelectorControlElement,\n        valueSourceSelector: ValueSourceSelectorControlElement,\n        valueEditor: ValueEditorControlElement,\n        cloneRuleAction: CloneRuleActionControlElement,\n        lockRuleAction: LockRuleActionControlElement,\n        removeRuleAction: RemoveRuleActionControlElement,\n      },\n      fields,\n      listsAsArrays,\n      parseNumbers,\n      showCloneButtons,\n      showLockButtons,\n    },\n    fieldData,\n    generateOnChangeHandler,\n    inputType,\n    parentDisabled,\n    path,\n    translations,\n    valueEditorType,\n    valueEditorSeparator,\n    values,\n    valueSources,\n    valueSourceOptions,\n    validationResult,\n  } = rule;\n\n  const cloneRule = useStopEventPropagation(rule.cloneRule);\n  const toggleLockRule = useStopEventPropagation(rule.toggleLockRule);\n  const removeRule = useStopEventPropagation(rule.removeRule);\n\n  const coreRuleProps = {\n    context,\n    disabled,\n    level: path.length,\n    path,\n    schema: rule.schema,\n    validation: validationResult,\n  };\n  const renderValueSources =\n    !['null', 'notNull'].includes(operator) && valueSources.length > 1;\n\n  return (\n    <>\n      {context.showRuleLines && (\n        <QueryBuilderLines path={path} props={props} context={context} />\n      )}\n      <div className={outerClassName}>\n        <FieldSelectorControlElement\n          testID={TestID.fields}\n          options={fields}\n          title={translations.fields.title}\n          value={field}\n          operator={operator}\n          className={classNames.fields}\n          handleOnChange={generateOnChangeHandler('field')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        <OperatorSelectorControlElement\n          testID={TestID.operators}\n          field={field}\n          fieldData={rule.fieldData}\n          title={rule.translations.operators.title}\n          options={operators}\n          value={operator}\n          className={rule.classNames.operators}\n          handleOnChange={rule.generateOnChangeHandler('operator')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        <ValueEditorControlElement\n          testID={TestID.valueEditor}\n          field={field}\n          fieldData={fieldData}\n          title={translations.value.title}\n          operator={operator}\n          value={value}\n          valueSource={valueSource ?? 'value'}\n          type={valueEditorType}\n          inputType={inputType}\n          values={values}\n          listsAsArrays={listsAsArrays}\n          parseNumbers={parseNumbers}\n          separator={valueEditorSeparator}\n          className={rule.classNames.value}\n          handleOnChange={generateOnChangeHandler('value')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        {renderValueSources && (\n          <ValueSourceSelectorControlElement\n            testID={TestID.valueSourceSelector}\n            field={field}\n            fieldData={fieldData}\n            title={translations.valueSourceSelector.title}\n            options={valueSourceOptions}\n            value={valueSource ?? 'value'}\n            className={classNames.valueSource}\n            handleOnChange={generateOnChangeHandler('valueSource')}\n            rule={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n      </div>\n      <div className={outerClassName}>\n        <RemoveRuleActionControlElement\n          testID={TestID.removeRule}\n          label={translations.removeRule.label ?? 'remove'}\n          title={translations.removeRule.title ?? 'remove'}\n          className={classNames.removeRule}\n          handleOnClick={removeRule}\n          ruleOrGroup={rule.rule}\n          {...coreRuleProps}\n        />\n        {showCloneButtons && (\n          <CloneRuleActionControlElement\n            testID={TestID.cloneRule}\n            label={translations.cloneRule.label ?? 'clone'}\n            title={translations.cloneRule.title ?? 'clone'}\n            className={classNames.cloneRule}\n            handleOnClick={cloneRule}\n            ruleOrGroup={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n        {showLockButtons && (\n          <LockRuleActionControlElement\n            testID={TestID.lockRule}\n            label={translations.lockRule.label ?? 'lock'}\n            title={translations.lockRule.title ?? 'lock'}\n            className={classNames.lockRule}\n            handleOnClick={toggleLockRule}\n            disabledTranslation={\n              parentDisabled ? undefined : translations.lockRuleDisabled\n            }\n            ruleOrGroup={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"rule.js","names":["QueryBuilderLines","context: QueryBuilderContextType"],"sources":["../../../src/components/query-builder/rule.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { memo, useContext } from 'react';\nimport {\n  type Path,\n  type RuleProps,\n  TestID,\n  useRule,\n  useStopEventPropagation,\n} from 'react-querybuilder';\nimport { Lines } from '../lines';\nimport styles from './styles.module.css';\nimport type { QueryBuilderContextType } from './types';\n\n/** Renders connecting lines between rules in a query builder */\nconst QueryBuilderLines = memo(function QueryBuilderLines({\n  path,\n  props,\n  context,\n}: {\n  path: Path;\n  props: RuleProps;\n  context: QueryBuilderContextType;\n}) {\n  const isLastRule = path[0] === props.schema.getQuery()?.rules.length - 1;\n  const line = isLastRule ? 'last' : 'branch';\n\n  return (\n    <Lines\n      variant={line}\n      size='small'\n      isVisible={context.showRuleLines}\n      className={styles.ruleLines}\n    />\n  );\n});\n\n/**\n * Rule - Individual rule component with field, operator, and value\n *\n * Renders the field selector, operator selector, value editor, and action buttons.\n *\n * @example\n * ```tsx\n * <Rule\n *   rule={{ field: 'name', operator: 'equals', value: 'John' }}\n *   path={[0]}\n *   schema={queryBuilderSchema}\n * />\n * ```\n *\n * @param props - RuleProps from react-querybuilder.\n * @returns The rendered Rule component with all selectors and actions.\n */\nexport function Rule(props: RuleProps) {\n  const rule = useRule(props);\n  const context: QueryBuilderContextType = useContext(props.context);\n\n  const {\n    classNames,\n    disabled,\n    operators,\n    outerClassName,\n    rule: { field, operator, value, valueSource },\n    schema: {\n      controls: {\n        fieldSelector: FieldSelectorControlElement,\n        operatorSelector: OperatorSelectorControlElement,\n        valueSourceSelector: ValueSourceSelectorControlElement,\n        valueEditor: ValueEditorControlElement,\n        cloneRuleAction: CloneRuleActionControlElement,\n        lockRuleAction: LockRuleActionControlElement,\n        removeRuleAction: RemoveRuleActionControlElement,\n      },\n      fields,\n      listsAsArrays,\n      parseNumbers,\n      showCloneButtons,\n      showLockButtons,\n    },\n    fieldData,\n    generateOnChangeHandler,\n    inputType,\n    parentDisabled,\n    path,\n    translations,\n    valueEditorType,\n    valueEditorSeparator,\n    values,\n    valueSources,\n    valueSourceOptions,\n    validationResult,\n  } = rule;\n\n  const cloneRule = useStopEventPropagation(rule.cloneRule);\n  const toggleLockRule = useStopEventPropagation(rule.toggleLockRule);\n  const removeRule = useStopEventPropagation(rule.removeRule);\n\n  const coreRuleProps = {\n    context,\n    disabled,\n    level: path.length,\n    path,\n    schema: rule.schema,\n    validation: validationResult,\n  };\n  const renderValueSources =\n    !['null', 'notNull'].includes(operator) && valueSources.length > 1;\n\n  return (\n    <>\n      {context.showRuleLines && (\n        <QueryBuilderLines path={path} props={props} context={context} />\n      )}\n      <div className={outerClassName}>\n        <FieldSelectorControlElement\n          testID={TestID.fields}\n          options={fields}\n          title={translations.fields.title}\n          value={field}\n          operator={operator}\n          className={classNames.fields}\n          handleOnChange={generateOnChangeHandler('field')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        <OperatorSelectorControlElement\n          testID={TestID.operators}\n          field={field}\n          fieldData={rule.fieldData}\n          title={rule.translations.operators.title}\n          options={operators}\n          value={operator}\n          className={rule.classNames.operators}\n          handleOnChange={rule.generateOnChangeHandler('operator')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        <ValueEditorControlElement\n          testID={TestID.valueEditor}\n          field={field}\n          fieldData={fieldData}\n          title={translations.value.title}\n          operator={operator}\n          value={value}\n          valueSource={valueSource ?? 'value'}\n          type={valueEditorType}\n          inputType={inputType}\n          values={values}\n          listsAsArrays={listsAsArrays}\n          parseNumbers={parseNumbers}\n          separator={valueEditorSeparator}\n          className={rule.classNames.value}\n          handleOnChange={generateOnChangeHandler('value')}\n          rule={rule.rule}\n          {...coreRuleProps}\n        />\n        {renderValueSources && (\n          <ValueSourceSelectorControlElement\n            testID={TestID.valueSourceSelector}\n            field={field}\n            fieldData={fieldData}\n            title={translations.valueSourceSelector.title}\n            options={valueSourceOptions}\n            value={valueSource ?? 'value'}\n            className={classNames.valueSource}\n            handleOnChange={generateOnChangeHandler('valueSource')}\n            rule={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n      </div>\n      <div className={outerClassName}>\n        <RemoveRuleActionControlElement\n          testID={TestID.removeRule}\n          label={translations.removeRule.label ?? 'remove'}\n          title={translations.removeRule.title ?? 'remove'}\n          className={classNames.removeRule}\n          handleOnClick={removeRule}\n          ruleOrGroup={rule.rule}\n          {...coreRuleProps}\n        />\n        {showCloneButtons && (\n          <CloneRuleActionControlElement\n            testID={TestID.cloneRule}\n            label={translations.cloneRule.label ?? 'clone'}\n            title={translations.cloneRule.title ?? 'clone'}\n            className={classNames.cloneRule}\n            handleOnClick={cloneRule}\n            ruleOrGroup={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n        {showLockButtons && (\n          <LockRuleActionControlElement\n            testID={TestID.lockRule}\n            label={translations.lockRule.label ?? 'lock'}\n            title={translations.lockRule.title ?? 'lock'}\n            className={classNames.lockRule}\n            handleOnClick={toggleLockRule}\n            disabledTranslation={\n              parentDisabled ? undefined : translations.lockRuleDisabled\n            }\n            ruleOrGroup={rule.rule}\n            {...coreRuleProps}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/query-builder/types.d.ts

@@ -15,9 +15,17 @@ import { Classnames, Field as Field$1, FullCombinator, FullField, FullOperator,
 import { LiteralUnion } from "type-fest";
 
 //#region src/components/query-builder/types.d.ts
+/** Re-export of RuleGroupType from react-querybuilder. */
 type RuleGroupType = RuleGroupType$1;
+/** Re-export of Field from react-querybuilder. */
 type Field = Field$1;
+/** Default QueryBuilder props with full field, operator, and combinator types. */
 type DefaultRQBProps = QueryBuilderProps$1<RuleGroupType, FullField, FullOperator, FullCombinator>;
+/**
+ * Map of value editor types to their React component implementations.
+ *
+ * TODO: need to add multiselect back in when we have a compatible component
+ */
 type QueryBuilderValueEditors = Record<LiteralUnion<Exclude<ValueEditorProps['type'], null | undefined | 'multiselect'>, string>, (props: ValueEditorProps) => ReactElement>;
 /**
  * Omitted props are currently unsupported functionality
@@ -30,6 +38,7 @@ type QueryBuilderProps = Partial<Omit<DefaultRQBProps, 'showCombinatorsBetweenRu
  * Omitted classnames are for unsupported features
  */
 type ClassNames = Omit<Classnames, 'betweenRules' | 'branches' | 'dndDragging' | 'dndOver' | 'dndCopy' | 'dndGroup' | 'dragHandle' | 'shiftActions' | 'notToggle'>;
+/** Context value for QueryBuilder containing display settings. */
 type QueryBuilderContextType = Pick<QueryBuilderProps, 'showRuleLines' | 'orientation'>;
 //#endregion
 export { ClassNames, DefaultRQBProps, Field, QueryBuilderContextType, QueryBuilderProps, QueryBuilderValueEditors, RuleGroupType };

package/dist/components/query-builder/utils.d.ts

@@ -13,6 +13,21 @@
 import { RuleType, RuleValidator, ValidationResult } from "react-querybuilder";
 
 //#region src/components/query-builder/utils.d.ts
+/**
+ * Runs the validator on a rule and normalizes the result.
+ * Returns { valid: true } if no validator is provided.
+ *
+ * @example
+ * ```tsx
+ * const rule = { field: 'age', operator: 'greaterThan', value: 18 };
+ * const validator = (r) => r.value > 0;
+ * const result = getValidationResult(rule, validator); // { valid: true }
+ * ```
+ *
+ * @param rule - The rule to validate.
+ * @param validator - Optional validator function for the rule.
+ * @returns Normalized validation result with valid flag and optional reasons.
+ */
 declare const getValidationResult: (rule: RuleType, validator?: RuleValidator) => ValidationResult;
 //#endregion
 export { getValidationResult };

package/dist/components/query-builder/utils.js

@@ -12,6 +12,21 @@
 
 
 //#region src/components/query-builder/utils.ts
+/**
+* Runs the validator on a rule and normalizes the result.
+* Returns { valid: true } if no validator is provided.
+*
+* @example
+* ```tsx
+* const rule = { field: 'age', operator: 'greaterThan', value: 18 };
+* const validator = (r) => r.value > 0;
+* const result = getValidationResult(rule, validator); // { valid: true }
+* ```
+*
+* @param rule - The rule to validate.
+* @param validator - Optional validator function for the rule.
+* @returns Normalized validation result with valid flag and optional reasons.
+*/
 const getValidationResult = (rule, validator) => {
 	if (!validator) return { valid: true };
 	const result = validator(rule);

package/dist/components/query-builder/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/query-builder/utils.ts"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type {\n  RuleType,\n  RuleValidator,\n  ValidationResult,\n} from 'react-querybuilder';\n\nexport const getValidationResult = (\n  rule: RuleType,\n  validator?: RuleValidator,\n): ValidationResult => {\n  if (!validator) {\n    return { valid: true };\n  }\n\n  const result = validator(rule);\n\n  if (typeof result === 'boolean') {\n    return { valid: result };\n  }\n\n  return {\n    valid: result.valid,\n    reasons: result.valid ? [] : result.reasons,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAa,uBACX,MACA,cACqB;AACrB,KAAI,CAAC,UACH,QAAO,EAAE,OAAO,MAAM;CAGxB,MAAM,SAAS,UAAU,KAAK;AAE9B,KAAI,OAAO,WAAW,UACpB,QAAO,EAAE,OAAO,QAAQ;AAG1B,QAAO;EACL,OAAO,OAAO;EACd,SAAS,OAAO,QAAQ,EAAE,GAAG,OAAO;EACrC"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/query-builder/utils.ts"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type {\n  RuleType,\n  RuleValidator,\n  ValidationResult,\n} from 'react-querybuilder';\n\n/**\n * Runs the validator on a rule and normalizes the result.\n * Returns { valid: true } if no validator is provided.\n *\n * @example\n * ```tsx\n * const rule = { field: 'age', operator: 'greaterThan', value: 18 };\n * const validator = (r) => r.value > 0;\n * const result = getValidationResult(rule, validator); // { valid: true }\n * ```\n *\n * @param rule - The rule to validate.\n * @param validator - Optional validator function for the rule.\n * @returns Normalized validation result with valid flag and optional reasons.\n */\nexport const getValidationResult = (\n  rule: RuleType,\n  validator?: RuleValidator,\n): ValidationResult => {\n  if (!validator) {\n    return { valid: true };\n  }\n\n  const result = validator(rule);\n\n  if (typeof result === 'boolean') {\n    return { valid: result };\n  }\n\n  return {\n    valid: result.valid,\n    reasons: result.valid ? [] : result.reasons,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,uBACX,MACA,cACqB;AACrB,KAAI,CAAC,UACH,QAAO,EAAE,OAAO,MAAM;CAGxB,MAAM,SAAS,UAAU,KAAK;AAE9B,KAAI,OAAO,WAAW,UACpB,QAAO,EAAE,OAAO,QAAQ;AAG1B,QAAO;EACL,OAAO,OAAO;EACd,SAAS,OAAO,QAAQ,EAAE,GAAG,OAAO;EACrC"}

package/dist/components/query-builder/value-editor.d.ts

@@ -11,11 +11,32 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime131 from "react/jsx-runtime";
+import * as react_jsx_runtime126 from "react/jsx-runtime";
 import { ValueEditorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-editor.d.ts
-declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime131.JSX.Element | null;
+
+/**
+ * ValueEditor - Input component for editing rule values
+ *
+ * Renders appropriate editor based on field type: text, checkbox, radio, select, switch, or textarea.
+ * Supports multi-value operators (between, notBetween) with start/end inputs.
+ *
+ * @example
+ * ```tsx
+ * <ValueEditor
+ *   fieldData={{ name: 'age', valueEditorType: 'text' }}
+ *   operator="greaterThan"
+ *   value="18"
+ *   handleOnChange={(value) => console.log(value)}
+ *   rule={{ field: 'age', operator: 'greaterThan', value: '18' }}
+ * />
+ * ```
+ *
+ * @param props - ValueEditorProps from react-querybuilder.
+ * @returns The rendered value editor, or null for null/notNull operators.
+ */
+declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime126.JSX.Element | null;
 //#endregion
 export { ValueEditor };
 //# sourceMappingURL=value-editor.d.ts.map

package/dist/components/query-builder/value-editor.js

@@ -130,6 +130,26 @@ const valueEditors = {
 	text: TextValueEditor,
 	textarea: TextareaValueEditor
 };
+/**
+* ValueEditor - Input component for editing rule values
+*
+* Renders appropriate editor based on field type: text, checkbox, radio, select, switch, or textarea.
+* Supports multi-value operators (between, notBetween) with start/end inputs.
+*
+* @example
+* ```tsx
+* <ValueEditor
+*   fieldData={{ name: 'age', valueEditorType: 'text' }}
+*   operator="greaterThan"
+*   value="18"
+*   handleOnChange={(value) => console.log(value)}
+*   rule={{ field: 'age', operator: 'greaterThan', value: '18' }}
+* />
+* ```
+*
+* @param props - ValueEditorProps from react-querybuilder.
+* @returns The rendered value editor, or null for null/notNull operators.
+*/
 function ValueEditor(props) {
 	const { fieldData: { name, valueEditorType }, operator, rule: ruleProp } = props;
 	const { valueAsArray, multiValueHandler } = useValueEditor({

package/dist/components/query-builder/value-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"value-editor.js","names":["defaultOptions: unknown[]","valueEditors: QueryBuilderValueEditors"],"sources":["../../../src/components/query-builder/value-editor.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { useCallback } from 'react';\nimport { useValueEditor, type ValueEditorProps } from 'react-querybuilder';\nimport { Checkbox } from '../checkbox';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { Switch } from '../switch';\nimport { TextAreaField } from '../text-area-field';\nimport { TextField } from '../text-field';\nimport { multiValueOperators } from './constants';\nimport styles from './styles.module.css';\nimport { getValidationResult } from './utils';\nimport { ValueSelector } from './value-selector';\nimport type { InputProps } from '../input/types';\nimport type { QueryBuilderValueEditors } from './types';\n\nfunction CheckboxValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <Checkbox\n      classNames={{ checkbox: className }}\n      isDisabled={disabled}\n      isSelected={value}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n    />\n  );\n}\n\nfunction RadioGroupValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n  values,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <RadioGroup\n      classNames={{ group: className }}\n      value={value}\n      isDisabled={disabled}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n    >\n      {values?.map((option) => (\n        <Radio key={option.name} value={option.value}>\n          {option.label}\n        </Radio>\n      ))}\n    </RadioGroup>\n  );\n}\n\nconst defaultOptions: unknown[] = [];\n\nfunction SelectValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  type,\n  value,\n  values = defaultOptions,\n  ...rest\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <ValueSelector\n      {...rest}\n      className={className}\n      disabled={disabled}\n      multiple={type === 'multiselect'}\n      options={values}\n      title={name}\n      validation={!valid}\n      value={value}\n      handleOnChange={handleOnChange}\n      aria-labelledby={name}\n    />\n  );\n}\n\nfunction SwitchValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <Switch\n      classNames={{ switch: className }}\n      isDisabled={disabled}\n      isSelected={Boolean(value)}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n    />\n  );\n}\n\nfunction TextValueEditor({\n  disabled,\n  fieldData: { name, placeholder, validator },\n  handleOnChange,\n  inputType,\n  rule,\n  value,\n  className,\n}: ValueEditorProps) {\n  const { valid, reasons } = getValidationResult(rule, validator);\n\n  return (\n    <TextField\n      inputProps={{\n        placeholder,\n        type: (inputType as InputProps['type']) ?? 'text',\n      }}\n      size='small'\n      value={value}\n      classNames={{ field: className, input: { container: styles.textInput } }}\n      isDisabled={disabled}\n      isInvalid={!valid}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n      errorMessage={reasons?.join('/n')}\n    />\n  );\n}\n\nfunction TextareaValueEditor({\n  className,\n  disabled,\n  fieldData: { name, placeholder, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid, reasons } = getValidationResult(rule, validator);\n\n  return (\n    <TextAreaField\n      classNames={{ field: className }}\n      size='small'\n      errorMessage={reasons?.join('/n')}\n      inputProps={{ placeholder }}\n      value={value}\n      isDisabled={disabled}\n      isInvalid={!valid}\n      onChange={handleOnChange}\n      aria-label={name}\n      aria-invalid={!valid}\n      aria-labelledby={name}\n    />\n  );\n}\n\nconst valueEditors: QueryBuilderValueEditors = {\n  checkbox: CheckboxValueEditor,\n  radio: RadioGroupValueEditor,\n  select: SelectValueEditor,\n  switch: SwitchValueEditor,\n  text: TextValueEditor,\n  textarea: TextareaValueEditor,\n};\n\nexport function ValueEditor(props: ValueEditorProps) {\n  const {\n    fieldData: { name, valueEditorType },\n    operator,\n    rule: ruleProp,\n  } = props;\n\n  const { valueAsArray, multiValueHandler } = useValueEditor({\n    ...props,\n    skipHook: true,\n  });\n\n  const rule = useCallback(\n    (index: number) => ({\n      ...ruleProp,\n      value: valueAsArray[index],\n    }),\n    [ruleProp, valueAsArray],\n  );\n\n  const handleRangeStartChange = useCallback(\n    (value: string) => multiValueHandler(value, 0),\n    [multiValueHandler],\n  );\n\n  const handleRangeEndChange = useCallback(\n    (value: string) => multiValueHandler(value, 1),\n    [multiValueHandler],\n  );\n\n  const type =\n    (typeof valueEditorType === 'function'\n      ? valueEditorType(operator)\n      : valueEditorType) ?? 'text';\n\n  const Editor = valueEditors?.[type];\n\n  if (operator === 'null' || operator === 'notNull' || !Editor) {\n    return null;\n  }\n\n  if (multiValueOperators.includes(operator)) {\n    return (\n      <>\n        {['start', 'end'].map((term, index) => (\n          <div key={`${name}-${term}`}>\n            <Editor\n              {...props}\n              rule={rule(index)}\n              value={valueAsArray[index]}\n              handleOnChange={\n                index ? handleRangeEndChange : handleRangeStartChange\n              }\n            />\n          </div>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <div>\n      <Editor {...props} />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"value-editor.js","names":["defaultOptions: unknown[]","valueEditors: QueryBuilderValueEditors"],"sources":["../../../src/components/query-builder/value-editor.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { useCallback } from 'react';\nimport { useValueEditor, type ValueEditorProps } from 'react-querybuilder';\nimport { Checkbox } from '../checkbox';\nimport { Radio } from '../radio';\nimport { RadioGroup } from '../radio/group';\nimport { Switch } from '../switch';\nimport { TextAreaField } from '../text-area-field';\nimport { TextField } from '../text-field';\nimport { multiValueOperators } from './constants';\nimport styles from './styles.module.css';\nimport { getValidationResult } from './utils';\nimport { ValueSelector } from './value-selector';\nimport type { InputProps } from '../input/types';\nimport type { QueryBuilderValueEditors } from './types';\n\nfunction CheckboxValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <Checkbox\n      classNames={{ checkbox: className }}\n      isDisabled={disabled}\n      isSelected={value}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n    />\n  );\n}\n\nfunction RadioGroupValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n  values,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <RadioGroup\n      classNames={{ group: className }}\n      value={value}\n      isDisabled={disabled}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n    >\n      {values?.map((option) => (\n        <Radio key={option.name} value={option.value}>\n          {option.label}\n        </Radio>\n      ))}\n    </RadioGroup>\n  );\n}\n\nconst defaultOptions: unknown[] = [];\n\nfunction SelectValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  type,\n  value,\n  values = defaultOptions,\n  ...rest\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <ValueSelector\n      {...rest}\n      className={className}\n      disabled={disabled}\n      multiple={type === 'multiselect'}\n      options={values}\n      title={name}\n      validation={!valid}\n      value={value}\n      handleOnChange={handleOnChange}\n      aria-labelledby={name}\n    />\n  );\n}\n\nfunction SwitchValueEditor({\n  className,\n  disabled,\n  fieldData: { name, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid } = getValidationResult(rule, validator);\n\n  return (\n    <Switch\n      classNames={{ switch: className }}\n      isDisabled={disabled}\n      isSelected={Boolean(value)}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n    />\n  );\n}\n\nfunction TextValueEditor({\n  disabled,\n  fieldData: { name, placeholder, validator },\n  handleOnChange,\n  inputType,\n  rule,\n  value,\n  className,\n}: ValueEditorProps) {\n  const { valid, reasons } = getValidationResult(rule, validator);\n\n  return (\n    <TextField\n      inputProps={{\n        placeholder,\n        type: (inputType as InputProps['type']) ?? 'text',\n      }}\n      size='small'\n      value={value}\n      classNames={{ field: className, input: { container: styles.textInput } }}\n      isDisabled={disabled}\n      isInvalid={!valid}\n      onChange={handleOnChange}\n      aria-invalid={!valid}\n      aria-label={name}\n      aria-labelledby={name}\n      errorMessage={reasons?.join('/n')}\n    />\n  );\n}\n\nfunction TextareaValueEditor({\n  className,\n  disabled,\n  fieldData: { name, placeholder, validator },\n  handleOnChange,\n  rule,\n  value,\n}: ValueEditorProps) {\n  const { valid, reasons } = getValidationResult(rule, validator);\n\n  return (\n    <TextAreaField\n      classNames={{ field: className }}\n      size='small'\n      errorMessage={reasons?.join('/n')}\n      inputProps={{ placeholder }}\n      value={value}\n      isDisabled={disabled}\n      isInvalid={!valid}\n      onChange={handleOnChange}\n      aria-label={name}\n      aria-invalid={!valid}\n      aria-labelledby={name}\n    />\n  );\n}\n\nconst valueEditors: QueryBuilderValueEditors = {\n  checkbox: CheckboxValueEditor,\n  radio: RadioGroupValueEditor,\n  select: SelectValueEditor,\n  switch: SwitchValueEditor,\n  text: TextValueEditor,\n  textarea: TextareaValueEditor,\n};\n\n/**\n * ValueEditor - Input component for editing rule values\n *\n * Renders appropriate editor based on field type: text, checkbox, radio, select, switch, or textarea.\n * Supports multi-value operators (between, notBetween) with start/end inputs.\n *\n * @example\n * ```tsx\n * <ValueEditor\n *   fieldData={{ name: 'age', valueEditorType: 'text' }}\n *   operator=\"greaterThan\"\n *   value=\"18\"\n *   handleOnChange={(value) => console.log(value)}\n *   rule={{ field: 'age', operator: 'greaterThan', value: '18' }}\n * />\n * ```\n *\n * @param props - ValueEditorProps from react-querybuilder.\n * @returns The rendered value editor, or null for null/notNull operators.\n */\nexport function ValueEditor(props: ValueEditorProps) {\n  const {\n    fieldData: { name, valueEditorType },\n    operator,\n    rule: ruleProp,\n  } = props;\n\n  const { valueAsArray, multiValueHandler } = useValueEditor({\n    ...props,\n    skipHook: true,\n  });\n\n  const rule = useCallback(\n    (index: number) => ({\n      ...ruleProp,\n      value: valueAsArray[index],\n    }),\n    [ruleProp, valueAsArray],\n  );\n\n  const handleRangeStartChange = useCallback(\n    (value: string) => multiValueHandler(value, 0),\n    [multiValueHandler],\n  );\n\n  const handleRangeEndChange = useCallback(\n    (value: string) => multiValueHandler(value, 1),\n    [multiValueHandler],\n  );\n\n  const type =\n    (typeof valueEditorType === 'function'\n      ? valueEditorType(operator)\n      : valueEditorType) ?? 'text';\n\n  const Editor = valueEditors?.[type];\n\n  if (operator === 'null' || operator === 'notNull' || !Editor) {\n    return null;\n  }\n\n  if (multiValueOperators.includes(operator)) {\n    return (\n      <>\n        {['start', 'end'].map((term, index) => (\n          <div key={`${name}-${term}`}>\n            <Editor\n              {...props}\n              rule={rule(index)}\n              value={valueAsArray[index]}\n              handleOnChange={\n                index ? handleRangeEndChange : handleRangeStartChange\n              }\n            />\n          </div>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <div>\n      <Editor {...props} />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/query-builder/value-selector.d.ts

@@ -11,11 +11,32 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime132 from "react/jsx-runtime";
+import * as react_jsx_runtime127 from "react/jsx-runtime";
 import { ValueSelectorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-selector.d.ts
-declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime132.JSX.Element;
+
+/**
+ * ValueSelector - Dropdown for selecting predefined values
+ *
+ * Renders a ComboBoxField with options, supporting grouped and flat option lists.
+ *
+ * @example
+ * ```tsx
+ * <ValueSelector
+ *   options={[
+ *     { name: 'option1', label: 'Option 1' },
+ *     { name: 'option2', label: 'Option 2' }
+ *   ]}
+ *   value="option1"
+ *   handleOnChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @param props - ValueSelectorProps from react-querybuilder.
+ * @returns The rendered ValueSelector dropdown.
+ */
+declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime127.JSX.Element;
 //#endregion
 export { ValueSelector };
 //# sourceMappingURL=value-selector.d.ts.map

package/dist/components/query-builder/value-selector.js

@@ -22,6 +22,26 @@ import { jsx } from "react/jsx-runtime";
 import { isOptionGroupArray, useValueSelector } from "react-querybuilder";
 
 //#region src/components/query-builder/value-selector.tsx
+/**
+* ValueSelector - Dropdown for selecting predefined values
+*
+* Renders a ComboBoxField with options, supporting grouped and flat option lists.
+*
+* @example
+* ```tsx
+* <ValueSelector
+*   options={[
+*     { name: 'option1', label: 'Option 1' },
+*     { name: 'option2', label: 'Option 2' }
+*   ]}
+*   value="option1"
+*   handleOnChange={(value) => console.log(value)}
+* />
+* ```
+*
+* @param props - ValueSelectorProps from react-querybuilder.
+* @returns The rendered ValueSelector dropdown.
+*/
 function ValueSelector(props) {
 	const { handleOnChange, disabled, listsAsArrays, options: optionsProp, multiple, title, validation, value, ...rest } = props;
 	const { onChange, val } = useValueSelector({

package/dist/components/query-builder/value-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"value-selector.js","names":[],"sources":["../../../src/components/query-builder/value-selector.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport type { Key } from '@react-types/shared';\nimport 'client-only';\nimport { useCallback, useMemo } from 'react';\nimport {\n  isOptionGroupArray,\n  useValueSelector,\n  type ValueSelectorProps,\n} from 'react-querybuilder';\nimport { ComboBoxField } from '../combobox-field';\nimport { OptionsItem } from '../options/item';\nimport { OptionsSection } from '../options/section';\n\nexport function ValueSelector(props: ValueSelectorProps) {\n  const {\n    handleOnChange,\n    disabled,\n    listsAsArrays,\n    options: optionsProp,\n    multiple,\n    title,\n    validation,\n    value,\n    ...rest\n  } = props;\n\n  const { onChange, val } = useValueSelector({\n    handleOnChange,\n    listsAsArrays,\n    multiple,\n    value,\n  });\n\n  const handleSelectionChange = useCallback(\n    (selection: Key | null) => {\n      if (selection) {\n        onChange(`${selection}`);\n      }\n    },\n    [onChange],\n  );\n\n  const options = useMemo(\n    () =>\n      isOptionGroupArray(optionsProp)\n        ? optionsProp.map((section) => (\n            <OptionsSection key={section.label} header={section.label}>\n              {section.options.map((option) => (\n                <OptionsItem id={option.name} key={option.name}>\n                  {option.label}\n                </OptionsItem>\n              ))}\n            </OptionsSection>\n          ))\n        : optionsProp.map((option) => (\n            <OptionsItem\n              textValue={option.label}\n              id={option.name}\n              key={option.name}\n            >\n              {option.label}\n            </OptionsItem>\n          )),\n    [optionsProp],\n  );\n\n  return (\n    <ComboBoxField\n      size='small'\n      isDisabled={disabled}\n      {...rest}\n      selectedKey={Array.isArray(val) ? val[0] : val}\n      aria-labelledby={title}\n      onSelectionChange={handleSelectionChange}\n    >\n      {options}\n    </ComboBoxField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,cAAc,OAA2B;CACvD,MAAM,EACJ,gBACA,UACA,eACA,SAAS,aACT,UACA,OACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,QAAQ,iBAAiB;EACzC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,aAC3B,cAA0B;AACzB,MAAI,UACF,UAAS,GAAG,YAAY;IAG5B,CAAC,SAAS,CACX;CAED,MAAM,UAAU,cAEZ,mBAAmB,YAAY,GAC3B,YAAY,KAAK,YACf,oBAAC;EAAmC,QAAQ,QAAQ;YACjD,QAAQ,QAAQ,KAAK,WACpB,oBAAC;GAAY,IAAI,OAAO;aACrB,OAAO;KADyB,OAAO,KAE5B,CACd;IALiB,QAAQ,MAMZ,CACjB,GACF,YAAY,KAAK,WACf,oBAAC;EACC,WAAW,OAAO;EAClB,IAAI,OAAO;YAGV,OAAO;IAFH,OAAO,KAGA,CACd,EACR,CAAC,YAAY,CACd;AAED,QACE,oBAAC;EACC,MAAK;EACL,YAAY;EACZ,GAAI;EACJ,aAAa,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;EAC3C,mBAAiB;EACjB,mBAAmB;YAElB;GACa"}
+{"version":3,"file":"value-selector.js","names":[],"sources":["../../../src/components/query-builder/value-selector.tsx"],"sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport type { Key } from '@react-types/shared';\nimport 'client-only';\nimport { useCallback, useMemo } from 'react';\nimport {\n  isOptionGroupArray,\n  useValueSelector,\n  type ValueSelectorProps,\n} from 'react-querybuilder';\nimport { ComboBoxField } from '../combobox-field';\nimport { OptionsItem } from '../options/item';\nimport { OptionsSection } from '../options/section';\n\n/**\n * ValueSelector - Dropdown for selecting predefined values\n *\n * Renders a ComboBoxField with options, supporting grouped and flat option lists.\n *\n * @example\n * ```tsx\n * <ValueSelector\n *   options={[\n *     { name: 'option1', label: 'Option 1' },\n *     { name: 'option2', label: 'Option 2' }\n *   ]}\n *   value=\"option1\"\n *   handleOnChange={(value) => console.log(value)}\n * />\n * ```\n *\n * @param props - ValueSelectorProps from react-querybuilder.\n * @returns The rendered ValueSelector dropdown.\n */\nexport function ValueSelector(props: ValueSelectorProps) {\n  const {\n    handleOnChange,\n    disabled,\n    listsAsArrays,\n    options: optionsProp,\n    multiple,\n    title,\n    validation,\n    value,\n    ...rest\n  } = props;\n\n  const { onChange, val } = useValueSelector({\n    handleOnChange,\n    listsAsArrays,\n    multiple,\n    value,\n  });\n\n  const handleSelectionChange = useCallback(\n    (selection: Key | null) => {\n      if (selection) {\n        onChange(`${selection}`);\n      }\n    },\n    [onChange],\n  );\n\n  const options = useMemo(\n    () =>\n      isOptionGroupArray(optionsProp)\n        ? optionsProp.map((section) => (\n            <OptionsSection key={section.label} header={section.label}>\n              {section.options.map((option) => (\n                <OptionsItem id={option.name} key={option.name}>\n                  {option.label}\n                </OptionsItem>\n              ))}\n            </OptionsSection>\n          ))\n        : optionsProp.map((option) => (\n            <OptionsItem\n              textValue={option.label}\n              id={option.name}\n              key={option.name}\n            >\n              {option.label}\n            </OptionsItem>\n          )),\n    [optionsProp],\n  );\n\n  return (\n    <ComboBoxField\n      size='small'\n      isDisabled={disabled}\n      {...rest}\n      selectedKey={Array.isArray(val) ? val[0] : val}\n      aria-labelledby={title}\n      onSelectionChange={handleSelectionChange}\n    >\n      {options}\n    </ComboBoxField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,cAAc,OAA2B;CACvD,MAAM,EACJ,gBACA,UACA,eACA,SAAS,aACT,UACA,OACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,QAAQ,iBAAiB;EACzC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,wBAAwB,aAC3B,cAA0B;AACzB,MAAI,UACF,UAAS,GAAG,YAAY;IAG5B,CAAC,SAAS,CACX;CAED,MAAM,UAAU,cAEZ,mBAAmB,YAAY,GAC3B,YAAY,KAAK,YACf,oBAAC;EAAmC,QAAQ,QAAQ;YACjD,QAAQ,QAAQ,KAAK,WACpB,oBAAC;GAAY,IAAI,OAAO;aACrB,OAAO;KADyB,OAAO,KAE5B,CACd;IALiB,QAAQ,MAMZ,CACjB,GACF,YAAY,KAAK,WACf,oBAAC;EACC,WAAW,OAAO;EAClB,IAAI,OAAO;YAGV,OAAO;IAFH,OAAO,KAGA,CACd,EACR,CAAC,YAAY,CACd;AAED,QACE,oBAAC;EACC,MAAK;EACL,YAAY;EACZ,GAAI;EACJ,aAAa,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;EAC3C,mBAAiB;EACjB,mBAAmB;YAElB;GACa"}

package/dist/components/radio/context.d.ts

@@ -12,7 +12,7 @@
 
 import { RadioGroupProps as RadioGroupProps$1 } from "./types.js";
 import "client-only";
-import * as react36 from "react";
+import * as react31 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/radio/context.d.ts
@@ -21,7 +21,7 @@ import { ContextValue } from "react-aria-components";
  *
  * Provides context for RadioGroup component to share state with Radio components
  */
-declare const RadioContext: react36.Context<ContextValue<RadioGroupProps$1, HTMLDivElement>>;
+declare const RadioContext: react31.Context<ContextValue<RadioGroupProps$1, HTMLDivElement>>;
 //#endregion
 export { RadioContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/radio/group.d.ts

@@ -12,19 +12,36 @@
 
 import { RadioGroupProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime133 from "react/jsx-runtime";
+import * as react_jsx_runtime128 from "react/jsx-runtime";
 
 //#region src/components/radio/group.d.ts
+
 /**
  * RadioGroup - Container component for Radio buttons
  *
  * Groups related Radio components and manages their selection state.
  * Only one Radio can be selected at a time within a RadioGroup.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Size" value="medium" onChange={setValue}>
+ *   <Radio value="small">Small</Radio>
+ *   <Radio value="medium">Medium</Radio>
+ *   <Radio value="large">Large</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * @param props - {@link RadioGroupProps}
+ * @param props.ref - Forwarded ref for the group container.
+ * @param props.classNames - Custom CSS class names for group and label.
+ * @param props.label - Optional text label for the group.
+ * @param props.children - Radio components to render inside the group.
+ * @returns The rendered RadioGroup component.
  */
 declare function RadioGroup({
   ref,
   ...props
-}: RadioGroupProps): react_jsx_runtime133.JSX.Element;
+}: RadioGroupProps): react_jsx_runtime128.JSX.Element;
 //#endregion
 export { RadioGroup };
 //# sourceMappingURL=group.d.ts.map

package/dist/components/radio/group.js

@@ -27,6 +27,22 @@ import styles from "./styles.module.css";
 *
 * Groups related Radio components and manages their selection state.
 * Only one Radio can be selected at a time within a RadioGroup.
+*
+* @example
+* ```tsx
+* <RadioGroup label="Size" value="medium" onChange={setValue}>
+*   <Radio value="small">Small</Radio>
+*   <Radio value="medium">Medium</Radio>
+*   <Radio value="large">Large</Radio>
+* </RadioGroup>
+* ```
+*
+* @param props - {@link RadioGroupProps}
+* @param props.ref - Forwarded ref for the group container.
+* @param props.classNames - Custom CSS class names for group and label.
+* @param props.label - Optional text label for the group.
+* @param props.children - Radio components to render inside the group.
+* @returns The rendered RadioGroup component.
 */
 function RadioGroup({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, RadioContext);

package/dist/components/radio/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","names":["AriaRadioGroup","Label","children"],"sources":["../../../src/components/radio/group.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  RadioGroup as AriaRadioGroup,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { RadioContext } from './context';\nimport styles from './styles.module.css';\nimport type { RadioGroupProps } from './types';\n\n/**\n * RadioGroup - Container component for Radio buttons\n *\n * Groups related Radio components and manages their selection state.\n * Only one Radio can be selected at a time within a RadioGroup.\n */\nexport function RadioGroup({ ref, ...props }: RadioGroupProps) {\n  [props, ref] = useContextProps(props, ref ?? null, RadioContext);\n\n  const { children, classNames, label, ...rest } = props;\n\n  return (\n    <AriaRadioGroup\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.group, (className) =>\n        clsx('group/radio-group', styles.group, className),\n      )}\n    >\n      {composeRenderProps(children, (children, { isDisabled, isRequired }) => (\n        <>\n          {label && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaRadioGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,WAAW,EAAE,KAAK,GAAG,SAA0B;AAC7D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,aAAa;CAEhE,MAAM,EAAE,UAAU,YAAY,OAAO,GAAG,SAAS;AAEjD,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,qBAAqB,OAAO,OAAO,UAAU,CACnD;YAEA,mBAAmB,WAAW,YAAU,EAAE,YAAY,iBACrD,4CACG,SACC,oBAACC;GACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;GACpC;GACA;aAEX;IACK,EAETC,cACA,CACH;GACa"}
+{"version":3,"file":"group.js","names":["AriaRadioGroup","Label","children"],"sources":["../../../src/components/radio/group.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  RadioGroup as AriaRadioGroup,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { RadioContext } from './context';\nimport styles from './styles.module.css';\nimport type { RadioGroupProps } from './types';\n\n/**\n * RadioGroup - Container component for Radio buttons\n *\n * Groups related Radio components and manages their selection state.\n * Only one Radio can be selected at a time within a RadioGroup.\n *\n * @example\n * ```tsx\n * <RadioGroup label=\"Size\" value=\"medium\" onChange={setValue}>\n *   <Radio value=\"small\">Small</Radio>\n *   <Radio value=\"medium\">Medium</Radio>\n *   <Radio value=\"large\">Large</Radio>\n * </RadioGroup>\n * ```\n *\n * @param props - {@link RadioGroupProps}\n * @param props.ref - Forwarded ref for the group container.\n * @param props.classNames - Custom CSS class names for group and label.\n * @param props.label - Optional text label for the group.\n * @param props.children - Radio components to render inside the group.\n * @returns The rendered RadioGroup component.\n */\nexport function RadioGroup({ ref, ...props }: RadioGroupProps) {\n  [props, ref] = useContextProps(props, ref ?? null, RadioContext);\n\n  const { children, classNames, label, ...rest } = props;\n\n  return (\n    <AriaRadioGroup\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.group, (className) =>\n        clsx('group/radio-group', styles.group, className),\n      )}\n    >\n      {composeRenderProps(children, (children, { isDisabled, isRequired }) => (\n        <>\n          {label && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          {children}\n        </>\n      ))}\n    </AriaRadioGroup>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,WAAW,EAAE,KAAK,GAAG,SAA0B;AAC7D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,aAAa;CAEhE,MAAM,EAAE,UAAU,YAAY,OAAO,GAAG,SAAS;AAEjD,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,qBAAqB,OAAO,OAAO,UAAU,CACnD;YAEA,mBAAmB,WAAW,YAAU,EAAE,YAAY,iBACrD,4CACG,SACC,oBAACC;GACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;GACpC;GACA;aAEX;IACK,EAETC,cACA,CACH;GACa"}

package/dist/components/radio/index.d.ts

@@ -12,46 +12,33 @@
 
 import { RadioProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime134 from "react/jsx-runtime";
+import * as react_jsx_runtime129 from "react/jsx-runtime";
 
 //#region src/components/radio/index.d.ts
 
 /**
- * Radio - A form control for exclusive selection within a group of options
+ * Radio - Individual radio button option within a RadioGroup
  *
- * Provides accessible radio button functionality where only one option can be
- * selected at a time within a group. Includes proper labeling, keyboard navigation,
- * and visual feedback for selection states.
+ * Renders a selectable radio button with label. Must be used inside a RadioGroup.
  *
- * @example
- * // Basic radio group
- * <RadioGroup label="Choose size">
- *   <Radio value="small">Small</Radio>
- *   <Radio value="medium">Medium</Radio>
- *   <Radio value="large">Large</Radio>
- * </RadioGroup>
- *
- * @example
- * // Radio group with default selection
- * <RadioGroup defaultValue="medium" label="Size preference">
- *   <Radio value="small">Small (S)</Radio>
- *   <Radio value="medium">Medium (M)</Radio>
- *   <Radio value="large">Large (L)</Radio>
- * </RadioGroup>
+ * @param props - {@link RadioProps}
+ * @param props.classNames - Custom CSS class names for radio, control, and label.
+ * @param props.children - Label content for the radio button.
+ * @returns The rendered Radio component.
  *
  * @example
- * // Disabled radio options
- * <RadioGroup label="Shipping options">
- *   <Radio value="standard">Standard shipping</Radio>
- *   <Radio value="express">Express shipping</Radio>
- *   <Radio value="overnight" isDisabled>Overnight (unavailable)</Radio>
+ * ```tsx
+ * <RadioGroup label="Favorite color">
+ *   <Radio value="red">Red</Radio>
+ *   <Radio value="blue">Blue</Radio>
  * </RadioGroup>
+ * ```
  */
 declare function Radio({
   classNames,
   children,
   ...rest
-}: RadioProps): react_jsx_runtime134.JSX.Element;
+}: RadioProps): react_jsx_runtime129.JSX.Element;
 //#endregion
 export { Radio };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.js

@@ -21,35 +21,22 @@ import styles from "./styles.module.css";
 
 //#region src/components/radio/index.tsx
 /**
-* Radio - A form control for exclusive selection within a group of options
+* Radio - Individual radio button option within a RadioGroup
 *
-* Provides accessible radio button functionality where only one option can be
-* selected at a time within a group. Includes proper labeling, keyboard navigation,
-* and visual feedback for selection states.
+* Renders a selectable radio button with label. Must be used inside a RadioGroup.
 *
-* @example
-* // Basic radio group
-* <RadioGroup label="Choose size">
-*   <Radio value="small">Small</Radio>
-*   <Radio value="medium">Medium</Radio>
-*   <Radio value="large">Large</Radio>
-* </RadioGroup>
-*
-* @example
-* // Radio group with default selection
-* <RadioGroup defaultValue="medium" label="Size preference">
-*   <Radio value="small">Small (S)</Radio>
-*   <Radio value="medium">Medium (M)</Radio>
-*   <Radio value="large">Large (L)</Radio>
-* </RadioGroup>
+* @param props - {@link RadioProps}
+* @param props.classNames - Custom CSS class names for radio, control, and label.
+* @param props.children - Label content for the radio button.
+* @returns The rendered Radio component.
 *
 * @example
-* // Disabled radio options
-* <RadioGroup label="Shipping options">
-*   <Radio value="standard">Standard shipping</Radio>
-*   <Radio value="express">Express shipping</Radio>
-*   <Radio value="overnight" isDisabled>Overnight (unavailable)</Radio>
+* ```tsx
+* <RadioGroup label="Favorite color">
+*   <Radio value="red">Red</Radio>
+*   <Radio value="blue">Blue</Radio>
 * </RadioGroup>
+* ```
 */
 function Radio({ classNames, children, ...rest }) {
 	return /* @__PURE__ */ jsx(Radio$1, {

package/dist/components/radio/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaRadio","children"],"sources":["../../../src/components/radio/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Radio as AriaRadio, composeRenderProps } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { RadioProps } from './types';\n\n/**\n * Radio - A form control for exclusive selection within a group of options\n *\n * Provides accessible radio button functionality where only one option can be\n * selected at a time within a group. Includes proper labeling, keyboard navigation,\n * and visual feedback for selection states.\n *\n * @example\n * // Basic radio group\n * <RadioGroup label=\"Choose size\">\n *   <Radio value=\"small\">Small</Radio>\n *   <Radio value=\"medium\">Medium</Radio>\n *   <Radio value=\"large\">Large</Radio>\n * </RadioGroup>\n *\n * @example\n * // Radio group with default selection\n * <RadioGroup defaultValue=\"medium\" label=\"Size preference\">\n *   <Radio value=\"small\">Small (S)</Radio>\n *   <Radio value=\"medium\">Medium (M)</Radio>\n *   <Radio value=\"large\">Large (L)</Radio>\n * </RadioGroup>\n *\n * @example\n * // Disabled radio options\n * <RadioGroup label=\"Shipping options\">\n *   <Radio value=\"standard\">Standard shipping</Radio>\n *   <Radio value=\"express\">Express shipping</Radio>\n *   <Radio value=\"overnight\" isDisabled>Overnight (unavailable)</Radio>\n * </RadioGroup>\n */\nexport function Radio({ classNames, children, ...rest }: RadioProps) {\n  return (\n    <AriaRadio\n      {...rest}\n      className={composeRenderProps(classNames?.radio, (className) =>\n        clsx('group/radio', styles.radio, className),\n      )}\n    >\n      {composeRenderProps(children, (children) => (\n        <>\n          <span className={clsx(styles.control, classNames?.control)} />\n          <span className={clsx(styles.label, classNames?.label)}>\n            {children}\n          </span>\n        </>\n      ))}\n    </AriaRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,MAAM,EAAE,YAAY,UAAU,GAAG,QAAoB;AACnE,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,eAAe,OAAO,OAAO,UAAU,CAC7C;YAEA,mBAAmB,WAAW,eAC7B,4CACE,oBAAC,UAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ,GAAI,EAC9D,oBAAC;GAAK,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;aACnDC;IACI,IACN,CACH;GACQ"}
+{"version":3,"file":"index.js","names":["AriaRadio","children"],"sources":["../../../src/components/radio/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Radio as AriaRadio, composeRenderProps } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { RadioProps } from './types';\n\n/**\n * Radio - Individual radio button option within a RadioGroup\n *\n * Renders a selectable radio button with label. Must be used inside a RadioGroup.\n *\n * @param props - {@link RadioProps}\n * @param props.classNames - Custom CSS class names for radio, control, and label.\n * @param props.children - Label content for the radio button.\n * @returns The rendered Radio component.\n *\n * @example\n * ```tsx\n * <RadioGroup label=\"Favorite color\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </RadioGroup>\n * ```\n */\nexport function Radio({ classNames, children, ...rest }: RadioProps) {\n  return (\n    <AriaRadio\n      {...rest}\n      className={composeRenderProps(classNames?.radio, (className) =>\n        clsx('group/radio', styles.radio, className),\n      )}\n    >\n      {composeRenderProps(children, (children) => (\n        <>\n          <span className={clsx(styles.control, classNames?.control)} />\n          <span className={clsx(styles.label, classNames?.label)}>\n            {children}\n          </span>\n        </>\n      ))}\n    </AriaRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,MAAM,EAAE,YAAY,UAAU,GAAG,QAAoB;AACnE,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,eAAe,OAAO,OAAO,UAAU,CAC7C;YAEA,mBAAmB,WAAW,eAC7B,4CACE,oBAAC,UAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ,GAAI,EAC9D,oBAAC;GAAK,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;aACnDC;IACI,IACN,CACH;GACQ"}

package/dist/components/radio/types.d.ts

@@ -15,6 +15,14 @@ import { RefAttributes } from "react";
 import { RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1 } from "react-aria-components";
 
 //#region src/components/radio/types.d.ts
+/**
+ * Props for RadioGroup component.
+ *
+ * Extends AriaRadioGroupProps with custom classNames and label support.
+ * - `classNames.group` - CSS class for the radio group container.
+ * - `classNames.label` - CSS class for the group label.
+ * - `label` - Optional text label for the group.
+ */
 type RadioGroupProps = Omit<RadioGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
   classNames?: {
     group?: RadioGroupProps$1['className'];
@@ -22,6 +30,14 @@ type RadioGroupProps = Omit<RadioGroupProps$1, 'className'> & RefAttributes<HTML
   };
   label?: string;
 };
+/**
+ * Props for Radio component.
+ *
+ * Extends AriaRadioProps with custom classNames support.
+ * - `classNames.radio` - CSS class for the radio label wrapper.
+ * - `classNames.control` - CSS class for the radio button control.
+ * - `classNames.label` - CSS class for the radio label text.
+ */
 type RadioProps = Omit<RadioProps$1, 'className'> & RefAttributes<HTMLLabelElement> & {
   classNames?: {
     radio?: RadioProps$1['className'];