@negative-space/radio 1.3.0 → 1.4.0

package/dist/index.d.mts

@@ -1,10 +1,7 @@
 import React from 'react';
 import { FlexProps } from '@negative-space/flex';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {
-    disabled?: boolean;
-    value: string | number;
+interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' | 'style' | 'onClick'> {
     classNames?: {
         label?: string;
         radio?: string;
@@ -15,16 +12,35 @@ interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {
         radio?: React.CSSProperties;
         inner?: React.CSSProperties;
     };
+    disabled?: boolean;
+    value: string;
+    label: React.ReactNode;
     isPopDisabled?: boolean;
 }
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;
 
-interface RadioGroupProps extends Omit<FlexProps, 'onChange'> {
+interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
+    classNames?: {
+        root?: string;
+        option?: {
+            label?: string;
+            radio?: string;
+            inner?: string;
+        };
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        option?: {
+            label?: React.CSSProperties;
+            radio?: React.CSSProperties;
+            inner?: React.CSSProperties;
+        };
+    };
     name?: string;
     disabled?: boolean;
-    value?: string | number;
-    onChange?: (value: string | number) => void;
+    options?: RadioOptionProps[];
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
 }
-declare const RadioGroup: ({ direction, className, value: valueProp, onChange, name: nameProp, disabled, children, ...props }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+export { RadioGroup, type RadioGroupProps };

package/dist/index.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
 import { FlexProps } from '@negative-space/flex';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {
-    disabled?: boolean;
-    value: string | number;
+interface RadioOptionProps extends Omit<FlexProps<'label'>, 'as' | 'className' | 'style' | 'onClick'> {
     classNames?: {
         label?: string;
         radio?: string;
@@ -15,16 +12,35 @@ interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {
         radio?: React.CSSProperties;
         inner?: React.CSSProperties;
     };
+    disabled?: boolean;
+    value: string;
+    label: React.ReactNode;
     isPopDisabled?: boolean;
 }
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;
 
-interface RadioGroupProps extends Omit<FlexProps, 'onChange'> {
+interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {
+    classNames?: {
+        root?: string;
+        option?: {
+            label?: string;
+            radio?: string;
+            inner?: string;
+        };
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        option?: {
+            label?: React.CSSProperties;
+            radio?: React.CSSProperties;
+            inner?: React.CSSProperties;
+        };
+    };
     name?: string;
     disabled?: boolean;
-    value?: string | number;
-    onChange?: (value: string | number) => void;
+    options?: RadioOptionProps[];
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
 }
-declare const RadioGroup: ({ direction, className, value: valueProp, onChange, name: nameProp, disabled, children, ...props }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+export { RadioGroup, type RadioGroupProps };

package/dist/index.js

@@ -1,64 +1,51 @@
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var system = require('@negative-space/system');
 var flex = require('@negative-space/flex');
+var rovingFocus = require('@negative-space/roving-focus');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/Radio.tsx
-var RadioContext = React3__default.default.createContext(null);
-var RadioProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value, children });
-};
+// src/RadioGroup.tsx
+var RadioContext = React.createContext(null);
 
 // src/useRadioContext.ts
 var useRadioContext = () => {
-  const ctx = React3.useContext(RadioContext);
+  const ctx = React.useContext(RadioContext);
   if (!ctx) {
     throw new Error("Radio must be used within RadioGroup");
   }
   return ctx;
 };
-var Radio = React3__default.default.forwardRef(
-  ({
-    classNames,
-    alignItems = "center",
-    styles,
-    value,
-    children,
-    disabled,
-    isPopDisabled,
-    ...props
-  }, ref) => {
-    const { global, components } = system.useNSUI();
-    const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext();
-    const Disabled = disabled ?? groupDisabled;
+var RadioOption = React__default.default.forwardRef(
+  ({ value, label, disabled, classNames, styles, ...props }) => {
+    const { global } = system.useNSUI();
+    const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext();
+    const ref = React.useRef(null);
+    const isDisabled = disabled ?? groupDisabled;
     const checked = selectedValue === value;
-    const IsPopDisabled = isPopDisabled ?? components.radio.isPopDisabled;
-    const handleClick = () => {
-      if (!Disabled) onChange?.(value);
-    };
-    const handleKeyDown = (e) => {
-      if (Disabled) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onChange?.(value);
-      }
-    };
+    React.useEffect(() => {
+      roving.registerItem({
+        id: value,
+        ref,
+        disabled: isDisabled
+      });
+      return () => roving.unregisterItem(value);
+    }, [value, isDisabled, roving]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       flex.Flex,
       {
         ...props,
         as: "label",
-        alignItems,
-        "aria-disabled": Disabled,
-        "data-disabled": Disabled,
-        onClick: handleClick,
-        className: system.cn(`${global.prefixCls}-radio-label`, classNames?.label),
+        alignItems: "center",
+        className: system.cn(
+          `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,
+          classNames?.label
+        ),
         style: styles?.label,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -68,76 +55,110 @@ var Radio = React3__default.default.forwardRef(
               role: "radio",
               "aria-checked": checked,
               "data-checked": checked,
-              tabIndex: Disabled ? -1 : 0,
-              onKeyDown: handleKeyDown,
-              "data-disabled": Disabled,
+              tabIndex: roving.hasInteracted && roving.activeId === value ? 0 : -1,
+              "data-disabled": isDisabled,
+              onClick: () => {
+                if (!isDisabled) {
+                  roving.focusItem(value);
+                  onChange?.(value);
+                }
+              },
+              onKeyDown: (e) => roving.handleItemKeyDown(e, value, onChange),
               className: system.cn(`${global.prefixCls}-radio`, classNames?.radio),
-              style: { ...styles?.radio },
+              style: {
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+                ...styles?.radio
+              },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
+                  "data-visible": checked,
                   className: system.cn(
-                    `${global.prefixCls}-radio-inner`,
-                    checked && !IsPopDisabled && `${global.prefixCls}-pop`,
+                    `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
                     classNames?.inner
                   ),
-                  style: { ...styles?.inner }
+                  style: {
+                    borderRadius: "50%",
+                    ...styles?.inner
+                  }
                 }
               )
             }
           ),
-          children
+          label
         ]
       }
     );
   }
 );
-Radio.displayName = "Radio";
-var RadioGroup = ({
-  direction = "column",
-  className,
-  value: valueProp,
-  onChange,
-  name: nameProp,
-  disabled = false,
-  children,
-  ...props
-}) => {
-  const { global } = system.useNSUI();
-  const autoName = React3.useId();
-  const name = nameProp ?? autoName;
-  const [internalValue, setInternalValue] = React3.useState(valueProp);
-  const value = valueProp !== void 0 ? valueProp : internalValue;
-  const handleChange = (newValue) => {
-    if (valueProp === void 0) setInternalValue(newValue);
-    onChange?.(newValue);
-  };
-  if (process.env.NODE_ENV !== "production") {
-    const countRadios = (nodes) => {
-      return React3__default.default.Children.toArray(nodes).reduce((acc, child) => {
-        if (!React3__default.default.isValidElement(child)) return acc;
-        if (child.type === Radio) return acc + 1;
-        const childChildren = child.props?.children;
-        return acc + countRadios(childChildren);
-      }, 0);
-    };
-    const radiosCount = countRadios(children);
-    if (radiosCount === 1) {
-      console.warn("RadioGroup has only one Radio. Consider using multiple options for clarity.");
-    }
+RadioOption.displayName = "RadioOption";
+var RadioGroup = React__default.default.forwardRef(
+  ({
+    classNames,
+    styles,
+    disabled = false,
+    options,
+    direction = "column",
+    name: nameProp,
+    defaultValue,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const { global } = system.useNSUI();
+    const autoName = React.useId();
+    const name = nameProp ?? autoName;
+    const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+    const roving = rovingFocus.useRovingFocus();
+    const handleChange = React.useCallback(
+      (value) => {
+        setSelectedValue(value);
+        roving.setActiveId(value);
+        onValueChange?.(value);
+      },
+      [onValueChange, roving]
+    );
+    const contextValue = React.useMemo(
+      () => ({
+        name,
+        disabled,
+        selectedValue,
+        onChange: handleChange,
+        roving
+      }),
+      [name, disabled, selectedValue, handleChange, roving]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      flex.Flex,
+      {
+        ...props,
+        as: "fieldset",
+        ref,
+        direction,
+        role: "radiogroup",
+        tabIndex: roving.hasInteracted ? -1 : 0,
+        onKeyDown: roving.handleGroupKeyDown,
+        onBlur: roving.handleGroupBlur,
+        className: system.cn(`${global.prefixCls}-radio-group`, classNames?.root),
+        style: styles?.root,
+        children: options?.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          RadioOption,
+          {
+            ...option,
+            classNames: system.mergeClassNames(classNames?.option, option.classNames),
+            styles: { ...styles?.option, ...option.styles }
+          },
+          option.value ?? index
+        ))
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioProvider, { name, selectedValue: value, onChange: handleChange, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
-    flex.Flex,
-    {
-      ...props,
-      direction,
-      className: system.cn(`${global.prefixCls}-radio-group`, className),
-      children
-    }
-  ) });
-};
+);
+RadioGroup.displayName = "RadioGroup";
 
-exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/RadioProvider.tsx","../src/useRadioContext.ts","../src/Radio.tsx","../src/RadioGroup.tsx"],"names":["React","jsx","useContext","useNSUI","jsxs","Flex","cn","useId","useState"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\n\nexport type RadioContextValue = {\n  name: string\n  disabled?: boolean\n  selectedValue?: string | number\n  onChange?: (value: string | number) => void\n}\n\nexport const RadioContext = React.createContext<RadioContextValue | null>(null)\n\nexport interface RadioProviderProps extends RadioContextValue {\n  children: React.ReactNode\n}\n\nexport const RadioProvider = ({ children, ...value }: RadioProviderProps) => {\n  return <RadioContext.Provider value={value}>{children}</RadioContext.Provider>\n}\n","import { useContext } from 'react'\nimport { RadioContext } from './RadioProvider'\n\nexport const useRadioContext = () => {\n  const ctx = useContext(RadioContext)\n\n  if (!ctx) {\n    throw new Error('Radio must be used within RadioGroup')\n  }\n\n  return ctx\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {\n  disabled?: boolean\n  value: string | number\n  classNames?: {\n    label?: string\n    radio?: string\n    inner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    radio?: React.CSSProperties\n    inner?: React.CSSProperties\n  }\n  isPopDisabled?: boolean\n}\n\nexport const Radio = React.forwardRef<HTMLDivElement, RadioProps>(\n  (\n    {\n      classNames,\n      alignItems = 'center',\n      styles,\n      value,\n      children,\n      disabled,\n      isPopDisabled,\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext()\n    const Disabled = disabled ?? groupDisabled\n    const checked = selectedValue === value\n    const IsPopDisabled = isPopDisabled ?? components.radio.isPopDisabled\n\n    const handleClick = () => {\n      if (!Disabled) onChange?.(value)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (Disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onChange?.(value)\n      }\n    }\n\n    return (\n      <Flex\n        {...props}\n        as=\"label\"\n        alignItems={alignItems}\n        aria-disabled={Disabled}\n        data-disabled={Disabled}\n        onClick={handleClick}\n        className={cn(`${global.prefixCls}-radio-label`, classNames?.label)}\n        style={styles?.label}\n      >\n        <div\n          ref={ref}\n          role=\"radio\"\n          aria-checked={checked}\n          data-checked={checked}\n          tabIndex={Disabled ? -1 : 0}\n          onKeyDown={handleKeyDown}\n          data-disabled={Disabled}\n          className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n          style={{ ...styles?.radio }}\n        >\n          <div\n            className={cn(\n              `${global.prefixCls}-radio-inner`,\n              checked && !IsPopDisabled && `${global.prefixCls}-pop`,\n              classNames?.inner\n            )}\n            style={{ ...styles?.inner }}\n          />\n        </div>\n        {children}\n      </Flex>\n    )\n  }\n)\n\nRadio.displayName = 'Radio'\n","import React, { useState, useId } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { RadioProvider } from './RadioProvider'\nimport { Radio } from './Radio'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'onChange'> {\n  name?: string\n  disabled?: boolean\n  value?: string | number\n  onChange?: (value: string | number) => void\n}\n\nexport const RadioGroup = ({\n  direction = 'column',\n  className,\n  value: valueProp,\n  onChange,\n  name: nameProp,\n  disabled = false,\n  children,\n  ...props\n}: RadioGroupProps) => {\n  const { global } = useNSUI()\n\n  const autoName = useId()\n  const name = nameProp ?? autoName\n\n  const [internalValue, setInternalValue] = useState<string | number | undefined>(valueProp)\n  const value = valueProp !== undefined ? valueProp : internalValue\n\n  const handleChange = (newValue: string | number) => {\n    if (valueProp === undefined) setInternalValue(newValue)\n    onChange?.(newValue)\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    const countRadios = (nodes: React.ReactNode): number => {\n      return React.Children.toArray(nodes).reduce((acc: number, child) => {\n        if (!React.isValidElement(child)) return acc\n        if (child.type === Radio) return acc + 1\n        const childChildren = (child.props as { children?: React.ReactNode })?.children\n        return acc + countRadios(childChildren)\n      }, 0)\n    }\n\n    const radiosCount = countRadios(children)\n    if (radiosCount === 1) {\n      console.warn('RadioGroup has only one Radio. Consider using multiple options for clarity.')\n    }\n  }\n\n  return (\n    <RadioProvider name={name} selectedValue={value} onChange={handleChange} disabled={disabled}>\n      <Flex\n        {...props}\n        direction={direction}\n        className={cn(`${global.prefixCls}-radio-group`, className)}\n      >\n        {children}\n      </Flex>\n    </RadioProvider>\n  )\n}\n"]}
+{"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["createContext","useContext","React","useNSUI","useRef","useEffect","jsxs","Flex","cn","jsx","useId","useState","useRovingFocus","useCallback","useMemo","mergeClassNames"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext } from 'react'\nimport type { useRovingFocus } from '@negative-space/roving-focus'\n\nexport interface RadioContextValue {\n  name: string\n  disabled?: boolean\n  selectedValue?: string\n  onChange?: (value: string) => void\n  roving: ReturnType<typeof useRovingFocus>\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n  const ctx = useContext(RadioContext)\n\n  if (!ctx) {\n    throw new Error('Radio must be used within RadioGroup')\n  }\n\n  return ctx\n}\n","import React, { useEffect, useRef } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n  FlexProps<'label'>,\n  'as' | 'className' | 'style' | 'onClick'\n> {\n  classNames?: {\n    label?: string\n    radio?: string\n    inner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    radio?: React.CSSProperties\n    inner?: React.CSSProperties\n  }\n  disabled?: boolean\n  value: string\n  label: React.ReactNode\n  isPopDisabled?: boolean\n}\n\nexport const RadioOption = React.forwardRef<HTMLDivElement, RadioOptionProps>(\n  ({ value, label, disabled, classNames, styles, ...props }) => {\n    const { global } = useNSUI()\n    const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext()\n\n    const ref = useRef<HTMLDivElement>(null)\n    const isDisabled = disabled ?? groupDisabled\n    const checked = selectedValue === value\n\n    useEffect(() => {\n      roving.registerItem({\n        id: value,\n        ref: ref as React.RefObject<HTMLElement>,\n        disabled: isDisabled\n      })\n      return () => roving.unregisterItem(value)\n    }, [value, isDisabled, roving])\n\n    return (\n      <Flex\n        {...props}\n        as=\"label\"\n        alignItems=\"center\"\n        className={cn(\n          `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,\n          classNames?.label\n        )}\n        style={styles?.label}\n      >\n        <div\n          ref={ref}\n          role=\"radio\"\n          aria-checked={checked}\n          data-checked={checked}\n          tabIndex={roving.hasInteracted && roving.activeId === value ? 0 : -1}\n          data-disabled={isDisabled}\n          onClick={() => {\n            if (!isDisabled) {\n              roving.focusItem(value)\n              onChange?.(value)\n            }\n          }}\n          onKeyDown={(e) => roving.handleItemKeyDown(e, value, onChange)}\n          className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n          style={{\n            borderRadius: '50%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n            ...styles?.radio\n          }}\n        >\n          <div\n            data-visible={checked}\n            className={cn(\n              `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n              classNames?.inner\n            )}\n            style={{\n              borderRadius: '50%',\n              ...styles?.inner\n            }}\n          />\n        </div>\n        {label}\n      </Flex>\n    )\n  }\n)\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeClassNames, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRovingFocus } from '@negative-space/roving-focus'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {\n  classNames?: {\n    root?: string\n    option?: {\n      label?: string\n      radio?: string\n      inner?: string\n    }\n  }\n  styles?: {\n    root?: React.CSSProperties\n    option?: {\n      label?: React.CSSProperties\n      radio?: React.CSSProperties\n      inner?: React.CSSProperties\n    }\n  }\n  name?: string\n  disabled?: boolean\n  options?: RadioOptionProps[]\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      classNames,\n      styles,\n      disabled = false,\n      options,\n      direction = 'column',\n      name: nameProp,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const { global } = useNSUI()\n    const autoName = useId()\n    const name = nameProp ?? autoName\n\n    const [selectedValue, setSelectedValue] = useState(defaultValue)\n    const roving = useRovingFocus()\n\n    const handleChange = useCallback(\n      (value: string) => {\n        setSelectedValue(value)\n        roving.setActiveId(value)\n        onValueChange?.(value)\n      },\n      [onValueChange, roving]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        name,\n        disabled,\n        selectedValue,\n        onChange: handleChange,\n        roving\n      }),\n      [name, disabled, selectedValue, handleChange, roving]\n    )\n\n    return (\n      <RadioContext.Provider value={contextValue}>\n        <Flex\n          {...props}\n          as=\"fieldset\"\n          ref={ref}\n          direction={direction}\n          role=\"radiogroup\"\n          tabIndex={roving.hasInteracted ? -1 : 0}\n          onKeyDown={roving.handleGroupKeyDown}\n          onBlur={roving.handleGroupBlur}\n          className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n          style={styles?.root}\n        >\n          {options?.map((option, index) => (\n            <RadioOption\n              key={option.value ?? index}\n              {...option}\n              classNames={mergeClassNames(classNames?.option, option.classNames)}\n              styles={{ ...styles?.option, ...option.styles }}\n            />\n          ))}\n        </Flex>\n      </RadioContext.Provider>\n    )\n  }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"]}

package/dist/index.mjs

@@ -1,13 +1,11 @@
-import React3, { useContext, useId, useState } from 'react';
-import { useNSUI, cn } from '@negative-space/system';
+import React, { createContext, useRef, useEffect, useId, useState, useCallback, useMemo, useContext } from 'react';
+import { useNSUI, cn, mergeClassNames } from '@negative-space/system';
 import { Flex } from '@negative-space/flex';
+import { useRovingFocus } from '@negative-space/roving-focus';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/Radio.tsx
-var RadioContext = React3.createContext(null);
-var RadioProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value, children });
-};
+// src/RadioGroup.tsx
+var RadioContext = createContext(null);
 
 // src/useRadioContext.ts
 var useRadioContext = () => {
@@ -17,42 +15,31 @@ var useRadioContext = () => {
   }
   return ctx;
 };
-var Radio = React3.forwardRef(
-  ({
-    classNames,
-    alignItems = "center",
-    styles,
-    value,
-    children,
-    disabled,
-    isPopDisabled,
-    ...props
-  }, ref) => {
-    const { global, components } = useNSUI();
-    const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext();
-    const Disabled = disabled ?? groupDisabled;
+var RadioOption = React.forwardRef(
+  ({ value, label, disabled, classNames, styles, ...props }) => {
+    const { global } = useNSUI();
+    const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext();
+    const ref = useRef(null);
+    const isDisabled = disabled ?? groupDisabled;
     const checked = selectedValue === value;
-    const IsPopDisabled = isPopDisabled ?? components.radio.isPopDisabled;
-    const handleClick = () => {
-      if (!Disabled) onChange?.(value);
-    };
-    const handleKeyDown = (e) => {
-      if (Disabled) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onChange?.(value);
-      }
-    };
+    useEffect(() => {
+      roving.registerItem({
+        id: value,
+        ref,
+        disabled: isDisabled
+      });
+      return () => roving.unregisterItem(value);
+    }, [value, isDisabled, roving]);
     return /* @__PURE__ */ jsxs(
       Flex,
       {
         ...props,
         as: "label",
-        alignItems,
-        "aria-disabled": Disabled,
-        "data-disabled": Disabled,
-        onClick: handleClick,
-        className: cn(`${global.prefixCls}-radio-label`, classNames?.label),
+        alignItems: "center",
+        className: cn(
+          `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,
+          classNames?.label
+        ),
         style: styles?.label,
         children: [
           /* @__PURE__ */ jsx(
@@ -62,75 +49,110 @@ var Radio = React3.forwardRef(
               role: "radio",
               "aria-checked": checked,
               "data-checked": checked,
-              tabIndex: Disabled ? -1 : 0,
-              onKeyDown: handleKeyDown,
-              "data-disabled": Disabled,
+              tabIndex: roving.hasInteracted && roving.activeId === value ? 0 : -1,
+              "data-disabled": isDisabled,
+              onClick: () => {
+                if (!isDisabled) {
+                  roving.focusItem(value);
+                  onChange?.(value);
+                }
+              },
+              onKeyDown: (e) => roving.handleItemKeyDown(e, value, onChange),
               className: cn(`${global.prefixCls}-radio`, classNames?.radio),
-              style: { ...styles?.radio },
+              style: {
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+                ...styles?.radio
+              },
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
+                  "data-visible": checked,
                   className: cn(
-                    `${global.prefixCls}-radio-inner`,
-                    checked && !IsPopDisabled && `${global.prefixCls}-pop`,
+                    `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,
                     classNames?.inner
                   ),
-                  style: { ...styles?.inner }
+                  style: {
+                    borderRadius: "50%",
+                    ...styles?.inner
+                  }
                 }
               )
             }
           ),
-          children
+          label
         ]
       }
     );
   }
 );
-Radio.displayName = "Radio";
-var RadioGroup = ({
-  direction = "column",
-  className,
-  value: valueProp,
-  onChange,
-  name: nameProp,
-  disabled = false,
-  children,
-  ...props
-}) => {
-  const { global } = useNSUI();
-  const autoName = useId();
-  const name = nameProp ?? autoName;
-  const [internalValue, setInternalValue] = useState(valueProp);
-  const value = valueProp !== void 0 ? valueProp : internalValue;
-  const handleChange = (newValue) => {
-    if (valueProp === void 0) setInternalValue(newValue);
-    onChange?.(newValue);
-  };
-  if (process.env.NODE_ENV !== "production") {
-    const countRadios = (nodes) => {
-      return React3.Children.toArray(nodes).reduce((acc, child) => {
-        if (!React3.isValidElement(child)) return acc;
-        if (child.type === Radio) return acc + 1;
-        const childChildren = child.props?.children;
-        return acc + countRadios(childChildren);
-      }, 0);
-    };
-    const radiosCount = countRadios(children);
-    if (radiosCount === 1) {
-      console.warn("RadioGroup has only one Radio. Consider using multiple options for clarity.");
-    }
+RadioOption.displayName = "RadioOption";
+var RadioGroup = React.forwardRef(
+  ({
+    classNames,
+    styles,
+    disabled = false,
+    options,
+    direction = "column",
+    name: nameProp,
+    defaultValue,
+    onValueChange,
+    ...props
+  }, ref) => {
+    const { global } = useNSUI();
+    const autoName = useId();
+    const name = nameProp ?? autoName;
+    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const roving = useRovingFocus();
+    const handleChange = useCallback(
+      (value) => {
+        setSelectedValue(value);
+        roving.setActiveId(value);
+        onValueChange?.(value);
+      },
+      [onValueChange, roving]
+    );
+    const contextValue = useMemo(
+      () => ({
+        name,
+        disabled,
+        selectedValue,
+        onChange: handleChange,
+        roving
+      }),
+      [name, disabled, selectedValue, handleChange, roving]
+    );
+    return /* @__PURE__ */ jsx(RadioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ...props,
+        as: "fieldset",
+        ref,
+        direction,
+        role: "radiogroup",
+        tabIndex: roving.hasInteracted ? -1 : 0,
+        onKeyDown: roving.handleGroupKeyDown,
+        onBlur: roving.handleGroupBlur,
+        className: cn(`${global.prefixCls}-radio-group`, classNames?.root),
+        style: styles?.root,
+        children: options?.map((option, index) => /* @__PURE__ */ jsx(
+          RadioOption,
+          {
+            ...option,
+            classNames: mergeClassNames(classNames?.option, option.classNames),
+            styles: { ...styles?.option, ...option.styles }
+          },
+          option.value ?? index
+        ))
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx(RadioProvider, { name, selectedValue: value, onChange: handleChange, disabled, children: /* @__PURE__ */ jsx(
-    Flex,
-    {
-      ...props,
-      direction,
-      className: cn(`${global.prefixCls}-radio-group`, className),
-      children
-    }
-  ) });
-};
+);
+RadioGroup.displayName = "RadioGroup";
 
-export { Radio, RadioGroup };
+export { RadioGroup };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/RadioProvider.tsx","../src/useRadioContext.ts","../src/Radio.tsx","../src/RadioGroup.tsx"],"names":["React","jsx","useNSUI","Flex","cn"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\n\nexport type RadioContextValue = {\n  name: string\n  disabled?: boolean\n  selectedValue?: string | number\n  onChange?: (value: string | number) => void\n}\n\nexport const RadioContext = React.createContext<RadioContextValue | null>(null)\n\nexport interface RadioProviderProps extends RadioContextValue {\n  children: React.ReactNode\n}\n\nexport const RadioProvider = ({ children, ...value }: RadioProviderProps) => {\n  return <RadioContext.Provider value={value}>{children}</RadioContext.Provider>\n}\n","import { useContext } from 'react'\nimport { RadioContext } from './RadioProvider'\n\nexport const useRadioContext = () => {\n  const ctx = useContext(RadioContext)\n\n  if (!ctx) {\n    throw new Error('Radio must be used within RadioGroup')\n  }\n\n  return ctx\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioProps extends Omit<FlexProps<'label'>, 'className' | 'style'> {\n  disabled?: boolean\n  value: string | number\n  classNames?: {\n    label?: string\n    radio?: string\n    inner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    radio?: React.CSSProperties\n    inner?: React.CSSProperties\n  }\n  isPopDisabled?: boolean\n}\n\nexport const Radio = React.forwardRef<HTMLDivElement, RadioProps>(\n  (\n    {\n      classNames,\n      alignItems = 'center',\n      styles,\n      value,\n      children,\n      disabled,\n      isPopDisabled,\n      ...props\n    },\n    ref\n  ) => {\n    const { global, components } = useNSUI()\n    const { selectedValue, onChange, disabled: groupDisabled } = useRadioContext()\n    const Disabled = disabled ?? groupDisabled\n    const checked = selectedValue === value\n    const IsPopDisabled = isPopDisabled ?? components.radio.isPopDisabled\n\n    const handleClick = () => {\n      if (!Disabled) onChange?.(value)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (Disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onChange?.(value)\n      }\n    }\n\n    return (\n      <Flex\n        {...props}\n        as=\"label\"\n        alignItems={alignItems}\n        aria-disabled={Disabled}\n        data-disabled={Disabled}\n        onClick={handleClick}\n        className={cn(`${global.prefixCls}-radio-label`, classNames?.label)}\n        style={styles?.label}\n      >\n        <div\n          ref={ref}\n          role=\"radio\"\n          aria-checked={checked}\n          data-checked={checked}\n          tabIndex={Disabled ? -1 : 0}\n          onKeyDown={handleKeyDown}\n          data-disabled={Disabled}\n          className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n          style={{ ...styles?.radio }}\n        >\n          <div\n            className={cn(\n              `${global.prefixCls}-radio-inner`,\n              checked && !IsPopDisabled && `${global.prefixCls}-pop`,\n              classNames?.inner\n            )}\n            style={{ ...styles?.inner }}\n          />\n        </div>\n        {children}\n      </Flex>\n    )\n  }\n)\n\nRadio.displayName = 'Radio'\n","import React, { useState, useId } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { RadioProvider } from './RadioProvider'\nimport { Radio } from './Radio'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'onChange'> {\n  name?: string\n  disabled?: boolean\n  value?: string | number\n  onChange?: (value: string | number) => void\n}\n\nexport const RadioGroup = ({\n  direction = 'column',\n  className,\n  value: valueProp,\n  onChange,\n  name: nameProp,\n  disabled = false,\n  children,\n  ...props\n}: RadioGroupProps) => {\n  const { global } = useNSUI()\n\n  const autoName = useId()\n  const name = nameProp ?? autoName\n\n  const [internalValue, setInternalValue] = useState<string | number | undefined>(valueProp)\n  const value = valueProp !== undefined ? valueProp : internalValue\n\n  const handleChange = (newValue: string | number) => {\n    if (valueProp === undefined) setInternalValue(newValue)\n    onChange?.(newValue)\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    const countRadios = (nodes: React.ReactNode): number => {\n      return React.Children.toArray(nodes).reduce((acc: number, child) => {\n        if (!React.isValidElement(child)) return acc\n        if (child.type === Radio) return acc + 1\n        const childChildren = (child.props as { children?: React.ReactNode })?.children\n        return acc + countRadios(childChildren)\n      }, 0)\n    }\n\n    const radiosCount = countRadios(children)\n    if (radiosCount === 1) {\n      console.warn('RadioGroup has only one Radio. Consider using multiple options for clarity.')\n    }\n  }\n\n  return (\n    <RadioProvider name={name} selectedValue={value} onChange={handleChange} disabled={disabled}>\n      <Flex\n        {...props}\n        direction={direction}\n        className={cn(`${global.prefixCls}-radio-group`, className)}\n      >\n        {children}\n      </Flex>\n    </RadioProvider>\n  )\n}\n"]}
+{"version":3,"sources":["../src/RadioContext.ts","../src/useRadioContext.ts","../src/RadioOption.tsx","../src/RadioGroup.tsx"],"names":["React","useNSUI","jsx","Flex","cn"],"mappings":"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","file":"index.mjs","sourcesContent":["import { createContext } from 'react'\nimport type { useRovingFocus } from '@negative-space/roving-focus'\n\nexport interface RadioContextValue {\n  name: string\n  disabled?: boolean\n  selectedValue?: string\n  onChange?: (value: string) => void\n  roving: ReturnType<typeof useRovingFocus>\n}\n\nexport const RadioContext = createContext<RadioContextValue | null>(null)\n","import { useContext } from 'react'\nimport { RadioContext, type RadioContextValue } from './RadioContext'\n\nexport const useRadioContext = (): RadioContextValue => {\n  const ctx = useContext(RadioContext)\n\n  if (!ctx) {\n    throw new Error('Radio must be used within RadioGroup')\n  }\n\n  return ctx\n}\n","import React, { useEffect, useRef } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRadioContext } from './useRadioContext'\n\nexport interface RadioOptionProps extends Omit<\n  FlexProps<'label'>,\n  'as' | 'className' | 'style' | 'onClick'\n> {\n  classNames?: {\n    label?: string\n    radio?: string\n    inner?: string\n  }\n  styles?: {\n    label?: React.CSSProperties\n    radio?: React.CSSProperties\n    inner?: React.CSSProperties\n  }\n  disabled?: boolean\n  value: string\n  label: React.ReactNode\n  isPopDisabled?: boolean\n}\n\nexport const RadioOption = React.forwardRef<HTMLDivElement, RadioOptionProps>(\n  ({ value, label, disabled, classNames, styles, ...props }) => {\n    const { global } = useNSUI()\n    const { selectedValue, onChange, disabled: groupDisabled, roving } = useRadioContext()\n\n    const ref = useRef<HTMLDivElement>(null)\n    const isDisabled = disabled ?? groupDisabled\n    const checked = selectedValue === value\n\n    useEffect(() => {\n      roving.registerItem({\n        id: value,\n        ref: ref as React.RefObject<HTMLElement>,\n        disabled: isDisabled\n      })\n      return () => roving.unregisterItem(value)\n    }, [value, isDisabled, roving])\n\n    return (\n      <Flex\n        {...props}\n        as=\"label\"\n        alignItems=\"center\"\n        className={cn(\n          `${global.prefixCls}-radio-label ${global.prefixCls}-clickable`,\n          classNames?.label\n        )}\n        style={styles?.label}\n      >\n        <div\n          ref={ref}\n          role=\"radio\"\n          aria-checked={checked}\n          data-checked={checked}\n          tabIndex={roving.hasInteracted && roving.activeId === value ? 0 : -1}\n          data-disabled={isDisabled}\n          onClick={() => {\n            if (!isDisabled) {\n              roving.focusItem(value)\n              onChange?.(value)\n            }\n          }}\n          onKeyDown={(e) => roving.handleItemKeyDown(e, value, onChange)}\n          className={cn(`${global.prefixCls}-radio`, classNames?.radio)}\n          style={{\n            borderRadius: '50%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n            ...styles?.radio\n          }}\n        >\n          <div\n            data-visible={checked}\n            className={cn(\n              `${global.prefixCls}-radio-inner ${global.prefixCls}-fade`,\n              classNames?.inner\n            )}\n            style={{\n              borderRadius: '50%',\n              ...styles?.inner\n            }}\n          />\n        </div>\n        {label}\n      </Flex>\n    )\n  }\n)\n\nRadioOption.displayName = 'RadioOption'\n","import React, { useCallback, useMemo, useState, useId } from 'react'\nimport { cn, mergeClassNames, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { useRovingFocus } from '@negative-space/roving-focus'\nimport { RadioOption, type RadioOptionProps } from './RadioOption'\nimport { RadioContext } from './RadioContext'\n\nexport interface RadioGroupProps extends Omit<FlexProps, 'children' | 'onChange'> {\n  classNames?: {\n    root?: string\n    option?: {\n      label?: string\n      radio?: string\n      inner?: string\n    }\n  }\n  styles?: {\n    root?: React.CSSProperties\n    option?: {\n      label?: React.CSSProperties\n      radio?: React.CSSProperties\n      inner?: React.CSSProperties\n    }\n  }\n  name?: string\n  disabled?: boolean\n  options?: RadioOptionProps[]\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      classNames,\n      styles,\n      disabled = false,\n      options,\n      direction = 'column',\n      name: nameProp,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    const { global } = useNSUI()\n    const autoName = useId()\n    const name = nameProp ?? autoName\n\n    const [selectedValue, setSelectedValue] = useState(defaultValue)\n    const roving = useRovingFocus()\n\n    const handleChange = useCallback(\n      (value: string) => {\n        setSelectedValue(value)\n        roving.setActiveId(value)\n        onValueChange?.(value)\n      },\n      [onValueChange, roving]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        name,\n        disabled,\n        selectedValue,\n        onChange: handleChange,\n        roving\n      }),\n      [name, disabled, selectedValue, handleChange, roving]\n    )\n\n    return (\n      <RadioContext.Provider value={contextValue}>\n        <Flex\n          {...props}\n          as=\"fieldset\"\n          ref={ref}\n          direction={direction}\n          role=\"radiogroup\"\n          tabIndex={roving.hasInteracted ? -1 : 0}\n          onKeyDown={roving.handleGroupKeyDown}\n          onBlur={roving.handleGroupBlur}\n          className={cn(`${global.prefixCls}-radio-group`, classNames?.root)}\n          style={styles?.root}\n        >\n          {options?.map((option, index) => (\n            <RadioOption\n              key={option.value ?? index}\n              {...option}\n              classNames={mergeClassNames(classNames?.option, option.classNames)}\n              styles={{ ...styles?.option, ...option.styles }}\n            />\n          ))}\n        </Flex>\n      </RadioContext.Provider>\n    )\n  }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@negative-space/radio",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,8 +30,9 @@
     "url": "https://github.com/negative-space-ui/nsui/issues"
   },
   "dependencies": {
-    "@negative-space/flex": "1.1.1",
-    "@negative-space/system": "1.0.1"
+    "@negative-space/flex": "1.2.0",
+    "@negative-space/roving-focus": "1.1.0",
+    "@negative-space/system": "1.1.0"
   },
   "peerDependencies": {
     "react": "^19.2.3"