@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-PSQ3HNZP.cjs → chunk-E66PSVBU.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
-require('./tokens-RYJ3DFTU.css');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Radio-IQKASYDF.css');
+require('./Radio-RL7232MZ.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,7 +27,27 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// src/components/Radio/Radio.tsx
+var uncontrolledRadioGroups = /* @__PURE__ */ new WeakMap();
+function registerUncontrolledRadio(input, name, listener) {
+  let documentGroups = uncontrolledRadioGroups.get(input.ownerDocument);
+  if (!documentGroups) {
+    documentGroups = /* @__PURE__ */ new Map();
+    uncontrolledRadioGroups.set(input.ownerDocument, documentGroups);
+  }
+  let group = documentGroups.get(name);
+  if (!group) {
+    group = /* @__PURE__ */ new Set();
+    documentGroups.set(name, group);
+  }
+  group.add(listener);
+  return () => {
+    group.delete(listener);
+    if (group.size === 0) documentGroups.delete(name);
+  };
+}
+function notifyUncontrolledRadioGroup(input, name) {
+  uncontrolledRadioGroups.get(input.ownerDocument)?.get(name)?.forEach((listener) => listener(input));
+}
 var RadioRoot = React__namespace.forwardRef(({
   checked,
   defaultChecked,
@@ -35,14 +56,38 @@ var RadioRoot = React__namespace.forwardRef(({
   label,
   className = "",
   id,
+  name,
+  value: formValue,
+  required,
+  form,
+  tabIndex,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...rest
 }, ref) => {
   const [inner, setInner] = React__namespace.useState(defaultChecked ?? false);
   const isControlled = checked !== void 0;
   const value = isControlled ? checked : inner;
+  const inputRef = React__namespace.useRef(null);
+  React__namespace.useLayoutEffect(() => {
+    if (!isControlled && inputRef.current && inputRef.current.checked !== inner) {
+      setInner(inputRef.current.checked);
+    }
+  }, [inner, isControlled]);
+  React__namespace.useEffect(() => {
+    const input = inputRef.current;
+    if (isControlled || !input || !name) return;
+    return registerUncontrolledRadio(input, name, (selected) => setInner(selected === input));
+  }, [isControlled, name]);
   const pick = () => {
     if (disabled) return;
-    if (!isControlled) setInner(true);
+    if (!isControlled) {
+      setInner(true);
+      if (name && inputRef.current) notifyUncontrolledRadioGroup(inputRef.current, name);
+    }
     onChange?.(true);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -50,46 +95,62 @@ var RadioRoot = React__namespace.forwardRef(({
     {
       ref,
       className: `radio ${value ? "checked" : ""} ${disabled ? "disabled" : ""} ${className}`,
-      onClick: pick,
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          "input",
           {
-            type: "button",
-            role: "radio",
-            "aria-checked": value,
+            ref: inputRef,
+            type: "radio",
+            className: "radio-native",
+            checked: value,
             disabled,
-            onClick: (event) => {
-              event.stopPropagation();
-              pick();
-            },
+            onChange: pick,
             id,
-            className: "radio-dot"
+            name,
+            value: formValue,
+            required,
+            form,
+            tabIndex,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "radio-dot" }),
         label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "radio-label", children: label })
       ]
     }
   );
 });
 RadioRoot.displayName = "Radio";
+var ThemedRadio = chunkNRJXZPZR_cjs.withComponentTheme(RadioRoot, "Radio", "radio");
+var InternalRadio = chunkNRJXZPZR_cjs.withInternalComponentThemePart(ThemedRadio, "Radio");
 var RadioGroupInner = ({
   options,
   value,
   defaultValue,
   onChange,
+  name,
+  required,
+  form,
   direction,
   variant = "default",
   size = "md",
   className = "",
+  onKeyDown,
   ...rest
 }, ref) => {
   const [inner, setInner] = React__namespace.useState(defaultValue);
+  const generatedName = React__namespace.useId();
   const groupRef = React__namespace.useRef(null);
   const [thumb, setThumb] = React__namespace.useState({ left: 0, width: 0, ready: false });
   const isControlled = value !== void 0;
   const current = isControlled ? value : inner;
+  const currentOption = options.find((option) => option.value === current);
+  const rovingValue = currentOption && !currentOption.disabled ? currentOption.value : options.find((option) => !option.disabled)?.value;
   const setGroupRef = React__namespace.useCallback(
     (node) => {
       groupRef.current = node;
@@ -103,6 +164,22 @@ var RadioGroupInner = ({
     onChange?.(v);
   };
   const resolvedDirection = direction ?? (variant === "segmented" ? "horizontal" : "vertical");
+  const groupName = name ?? `lumina-radio-${generatedName.replace(/:/g, "")}`;
+  const handleGroupKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (!["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) return;
+    const inputs = Array.from(
+      groupRef.current?.querySelectorAll('input[type="radio"]:not(:disabled)') ?? []
+    );
+    if (!inputs.length) return;
+    const activeIndex = Math.max(0, inputs.indexOf(document.activeElement));
+    const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
+    const next = inputs[(activeIndex + delta + inputs.length) % inputs.length];
+    event.preventDefault();
+    next.focus();
+    next.click();
+  };
   React__namespace.useLayoutEffect(() => {
     if (variant !== "segmented") return;
     const group = groupRef.current;
@@ -136,7 +213,7 @@ var RadioGroupInner = ({
       window.removeEventListener("resize", updateThumb);
     };
   }, [current, options, size, variant]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setGroupRef, className: `radio-group ${resolvedDirection} ${variant} ${size} ${className}`, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setGroupRef, ...rest, role: "radiogroup", onKeyDown: handleGroupKeyDown, className: `radio-group ${resolvedDirection} ${variant} ${size} ${className}`, children: [
     variant === "segmented" && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -150,20 +227,30 @@ var RadioGroupInner = ({
       }
     ),
     options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-      RadioRoot,
+      InternalRadio,
       {
         label: opt.label,
         checked: current === opt.value,
         disabled: opt.disabled,
+        name: groupName,
+        required,
+        form,
+        value: opt.value,
+        tabIndex: rovingValue === opt.value ? 0 : -1,
         onChange: () => pick(opt.value)
       },
       String(opt.value)
     ))
   ] });
 };
-var RadioGroup = React__namespace.forwardRef(RadioGroupInner);
-RadioGroup.displayName = "RadioGroup";
-var Radio = RadioRoot;
+var RadioGroupBase = React__namespace.forwardRef(RadioGroupInner);
+RadioGroupBase.displayName = "RadioGroup";
+var RadioGroup = chunkNRJXZPZR_cjs.withComponentTheme(
+  RadioGroupBase,
+  "RadioGroup",
+  "radio"
+);
+var Radio = ThemedRadio;
 Radio.Group = RadioGroup;
 
 exports.Radio = Radio;