@nexus-cross/design-system 1.0.14 → 1.1.1

package/dist/chunks/chunk-AG2UJPFX.mjs

@@ -0,0 +1,621 @@
+import { Spinner } from './chunk-BPUQ2CO2.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var comboboxInputVariants = cva("nexus-combobox", {
+  variants: {
+    size: {
+      md: "nexus-combobox--md",
+      lg: "nexus-combobox--lg",
+      xl: "nexus-combobox--xl"
+    },
+    state: {
+      default: "nexus-combobox--default",
+      error: "nexus-combobox--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+function ComboboxOption(_) {
+  return null;
+}
+ComboboxOption.displayName = "Combobox.Option";
+function ComboboxOptionDescription(_) {
+  return null;
+}
+ComboboxOptionDescription.displayName = "Combobox.OptionDescription";
+function ComboboxOptionMeta(_) {
+  return null;
+}
+ComboboxOptionMeta.displayName = "Combobox.OptionMeta";
+function isElementOfType(node, type) {
+  return React.isValidElement(node) && node.type === type;
+}
+function extractText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    return node.map(extractText).filter(Boolean).join(" ");
+  }
+  if (React.isValidElement(node)) {
+    if (node.type === ComboboxOptionDescription || node.type === ComboboxOptionMeta) {
+      return "";
+    }
+    const children = node.props?.children;
+    return extractText(children);
+  }
+  return "";
+}
+function resolveOptionsFromChildren(children) {
+  const resolved = [];
+  const seenValues = /* @__PURE__ */ new Set();
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type !== ComboboxOption) {
+      if (process.env.NODE_ENV !== "production") {
+        const name = typeof child.type === "string" ? child.type : child.type?.displayName ?? child.type?.name ?? "Unknown";
+        console.warn(
+          `[Combobox] Ignoring child <${name}>. Only <Combobox.Option> is allowed as a direct child of <Combobox>.`
+        );
+      }
+      return;
+    }
+    const props = child.props;
+    const value = props.value;
+    if (typeof value !== "string" || value.length === 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          "[Combobox] <Combobox.Option> requires a non-empty string `value` prop."
+        );
+      }
+      return;
+    }
+    if (seenValues.has(value)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          `[Combobox] Duplicate option value: "${value}". Each <Combobox.Option> must have a unique \`value\`. The duplicate will be ignored.`
+        );
+      }
+      return;
+    }
+    seenValues.add(value);
+    const labelNodes = [];
+    let description = null;
+    let meta = null;
+    React.Children.forEach(props.children, (slot) => {
+      if (isElementOfType(slot, ComboboxOptionDescription)) {
+        description = slot.props.children;
+        return;
+      }
+      if (isElementOfType(slot, ComboboxOptionMeta)) {
+        meta = slot.props.children;
+        return;
+      }
+      labelNodes.push(slot);
+    });
+    const label = labelNodes.length === 1 ? labelNodes[0] : labelNodes;
+    const textValue = typeof props.textValue === "string" && props.textValue.length > 0 ? props.textValue : extractText(label);
+    resolved.push({
+      value,
+      disabled: !!props.disabled,
+      textValue,
+      className: props.className,
+      label,
+      description,
+      meta
+    });
+  });
+  return resolved;
+}
+var ChevronDown = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+  }
+);
+var ClearIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+  }
+);
+function defaultFilter(option, query) {
+  if (!query) return true;
+  const haystack = option.textValue || option.value;
+  return haystack.toLowerCase().includes(query.toLowerCase());
+}
+function useDebouncedCallback(callback, delay) {
+  const cbRef = React.useRef(callback);
+  React.useEffect(() => {
+    cbRef.current = callback;
+  }, [callback]);
+  const timer = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  return React.useCallback(
+    (...args) => {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => cbRef.current?.(...args), delay);
+    },
+    [delay]
+  );
+}
+var ComboboxImpl = React.forwardRef(
+  function Combobox(props, ref) {
+    const {
+      children,
+      onSearch,
+      searchDebounce = 250,
+      loading = false,
+      filter,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C",
+      loadingMessage = "\uAC80\uC0C9 \uC911\u2026",
+      size,
+      disabled,
+      error,
+      clearable = true,
+      autoOpenOnFocus = true,
+      label,
+      description,
+      className,
+      popoverClassName,
+      id,
+      multiple,
+      value: controlledValue,
+      defaultValue,
+      onValueChange
+    } = props;
+    const isMultiple = !!multiple;
+    const fallbackId = React.useRef(
+      `nexus-cmbx-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const listboxId = `${inputId}-listbox`;
+    const inputRef = React.useRef(null);
+    const anchorRef = React.useRef(null);
+    const setInputRef = React.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const initialInternal = React.useMemo(() => {
+      if (isMultiple) {
+        return Array.isArray(defaultValue) ? defaultValue : [];
+      }
+      return typeof defaultValue === "string" ? defaultValue : null;
+    }, [isMultiple, defaultValue]);
+    const [internalValue, setInternalValue] = React.useState(initialInternal);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const selectedValues = React.useMemo(() => {
+      if (isMultiple) return Array.isArray(currentValue) ? currentValue : [];
+      return typeof currentValue === "string" ? [currentValue] : [];
+    }, [isMultiple, currentValue]);
+    const updateValue = React.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        if (isMultiple) {
+          onValueChange?.(
+            next ?? []
+          );
+        } else {
+          onValueChange?.(
+            next ?? null
+          );
+        }
+      },
+      [isControlled, isMultiple, onValueChange]
+    );
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const debouncedSearch = useDebouncedCallback(onSearch, searchDebounce);
+    const resolvedOptions = React.useMemo(
+      () => resolveOptionsFromChildren(children),
+      [children]
+    );
+    const visibleOptions = React.useMemo(() => {
+      if (onSearch) return resolvedOptions;
+      const filterFn = filter ?? defaultFilter;
+      return resolvedOptions.filter(
+        (o) => filterFn(
+          { value: o.value, textValue: o.textValue, disabled: o.disabled },
+          query
+        )
+      );
+    }, [onSearch, resolvedOptions, filter, query]);
+    React.useEffect(() => {
+      if (activeIndex >= visibleOptions.length) {
+        setActiveIndex(visibleOptions.length > 0 ? 0 : -1);
+      }
+    }, [visibleOptions, activeIndex]);
+    const handleInputChange = (e) => {
+      const next = e.target.value;
+      setQuery(next);
+      setOpen(true);
+      setActiveIndex(0);
+      if (onSearch) debouncedSearch(next);
+    };
+    const handleFocus = () => {
+      if (autoOpenOnFocus && !disabled) setOpen(true);
+    };
+    const selectOption = (option) => {
+      if (option.disabled) return;
+      if (isMultiple) {
+        const set = new Set(selectedValues);
+        if (set.has(option.value)) set.delete(option.value);
+        else set.add(option.value);
+        updateValue(Array.from(set));
+        setQuery("");
+        if (onSearch) debouncedSearch("");
+        inputRef.current?.focus();
+      } else {
+        updateValue(option.value);
+        const labelText = option.textValue || option.value;
+        setQuery(labelText);
+        setOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    const removeChip = (val) => {
+      if (!isMultiple) return;
+      updateValue(selectedValues.filter((v) => v !== val));
+      inputRef.current?.focus();
+    };
+    const clearAll = () => {
+      if (isMultiple) updateValue([]);
+      else updateValue(null);
+      setQuery("");
+      if (onSearch) debouncedSearch("");
+      inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex + 1;
+        while (next < visibleOptions.length && visibleOptions[next].disabled)
+          next++;
+        if (next < visibleOptions.length) setActiveIndex(next);
+        else setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex - 1;
+        while (next >= 0 && visibleOptions[next].disabled) next--;
+        if (next >= 0) setActiveIndex(next);
+        else {
+          for (let i = visibleOptions.length - 1; i >= 0; i--) {
+            if (!visibleOptions[i].disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+        }
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        const idx = visibleOptions.findIndex((o) => !o.disabled);
+        if (idx >= 0) setActiveIndex(idx);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        for (let i = visibleOptions.length - 1; i >= 0; i--) {
+          if (!visibleOptions[i].disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        if (open && activeIndex >= 0 && visibleOptions[activeIndex]) {
+          e.preventDefault();
+          selectOption(visibleOptions[activeIndex]);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (open) {
+          e.preventDefault();
+          setOpen(false);
+        }
+        return;
+      }
+      if (e.key === "Backspace" && isMultiple && query === "" && selectedValues.length > 0) {
+        e.preventDefault();
+        removeChip(selectedValues[selectedValues.length - 1]);
+      }
+    };
+    const selectedOptionMap = React.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const opt of resolvedOptions) map.set(opt.value, opt);
+      return map;
+    }, [resolvedOptions]);
+    const prevValueRef = React.useRef(
+      currentValue
+    );
+    React.useEffect(() => {
+      if (isMultiple) {
+        prevValueRef.current = currentValue;
+        return;
+      }
+      const valueChanged = prevValueRef.current !== currentValue;
+      prevValueRef.current = currentValue;
+      if (typeof currentValue !== "string") {
+        if (valueChanged) setQuery("");
+        return;
+      }
+      const opt = selectedOptionMap.get(currentValue);
+      const labelText = opt ? opt.textValue || currentValue : currentValue;
+      if (valueChanged) {
+        setQuery(labelText);
+      } else {
+        setQuery((prev) => prev === currentValue ? labelText : prev);
+      }
+    }, [isMultiple, currentValue, selectedOptionMap]);
+    const hasValue = isMultiple && selectedValues.length > 0 || !isMultiple && typeof currentValue === "string" && currentValue !== "";
+    const showClear = clearable && !disabled && (hasValue || query.length > 0);
+    const state = error ? "error" : "default";
+    const hasField = !!(label || description);
+    const inputBox = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          comboboxInputVariants({ size, state }),
+          disabled && "nexus-combobox--disabled",
+          open && "nexus-combobox--open",
+          !hasField && className
+        ),
+        onClick: () => !disabled && inputRef.current?.focus(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "nexus-combobox__content", children: [
+            isMultiple && selectedValues.map((val) => {
+              const opt = selectedOptionMap.get(val);
+              const chipLabel = opt ? opt.label ?? opt.textValue ?? val : val;
+              return /* @__PURE__ */ jsxs("span", { className: "nexus-combobox__chip", children: [
+                /* @__PURE__ */ jsx("span", { className: "nexus-combobox__chip-label", children: chipLabel }),
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "nexus-combobox__chip-remove",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeChip(val);
+                    },
+                    "aria-label": `Remove ${val}`,
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-combobox__chip-remove-icon" })
+                  }
+                )
+              ] }, val);
+            }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: setInputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                autoComplete: "off",
+                spellCheck: false,
+                className: "nexus-combobox__input",
+                placeholder: isMultiple && selectedValues.length > 0 ? "" : placeholder,
+                value: query,
+                disabled,
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": open && activeIndex >= 0 && visibleOptions[activeIndex] ? `${inputId}-opt-${activeIndex}` : void 0,
+                "aria-invalid": error || void 0,
+                "aria-describedby": description ? `${inputId}-desc` : void 0,
+                onChange: handleInputChange,
+                onFocus: handleFocus,
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-combobox__suffix", children: [
+            loading && /* @__PURE__ */ jsx("span", { className: "nexus-combobox__icon nexus-combobox__icon--loading", children: /* @__PURE__ */ jsx(Spinner, { size: 16 }) }),
+            showClear && !loading && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-combobox__clear",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  clearAll();
+                },
+                tabIndex: -1,
+                "aria-label": "Clear",
+                children: /* @__PURE__ */ jsx(ClearIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "nexus-combobox__chevron",
+                  open && "nexus-combobox__chevron--open"
+                ),
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(ChevronDown, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const popoverBody = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: inputBox }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+        PopoverPrimitive.Content,
+        {
+          align: "start",
+          side: "bottom",
+          sideOffset: 4,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onPointerDownOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          onInteractOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          className: cn("nexus-combobox-popover", popoverClassName),
+          style: { width: "var(--radix-popover-trigger-width)" },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listbox",
+              id: listboxId,
+              className: "nexus-combobox-listbox",
+              children: loading ? /* @__PURE__ */ jsxs("div", { className: "nexus-combobox-popover__status", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { children: loadingMessage })
+              ] }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "nexus-combobox-popover__status", children: /* @__PURE__ */ jsx("span", { children: emptyMessage }) }) : visibleOptions.map((option, idx) => {
+                const selected = selectedValues.includes(option.value);
+                const active = idx === activeIndex;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: `${inputId}-opt-${idx}`,
+                    role: "option",
+                    "aria-selected": selected,
+                    "data-disabled": option.disabled || void 0,
+                    "data-active": active || void 0,
+                    "data-selected": selected || void 0,
+                    className: cn(
+                      "nexus-combobox-option",
+                      active && "nexus-combobox-option--active",
+                      selected && "nexus-combobox-option--selected",
+                      option.disabled && "nexus-combobox-option--disabled",
+                      option.className
+                    ),
+                    onMouseEnter: () => setActiveIndex(idx),
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      selectOption(option);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "nexus-combobox-option__body", children: [
+                        /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__label", children: option.label }),
+                        option.description != null && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__description", children: option.description })
+                      ] }),
+                      option.meta != null && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__meta", children: option.meta }),
+                      selected && /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "nexus-combobox-option__check",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 16 16",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": true,
+                          children: /* @__PURE__ */ jsx("path", { d: "M3 8l4 4 6-8" })
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        }
+      ) })
+    ] });
+    if (!hasField) return popoverBody;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-combobox-field", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "nexus-combobox-field__label", htmlFor: inputId, children: label }),
+      popoverBody,
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: `${inputId}-desc`,
+          className: cn(
+            "nexus-combobox-field__description",
+            error && "nexus-combobox-field__description--error"
+          ),
+          children: description
+        }
+      )
+    ] });
+  }
+);
+ComboboxImpl.displayName = "Combobox";
+var Combobox2 = ComboboxImpl;
+Combobox2.Option = ComboboxOption;
+Combobox2.OptionDescription = ComboboxOptionDescription;
+Combobox2.OptionMeta = ComboboxOptionMeta;
+
+export { Combobox2 as Combobox, ComboboxOption, ComboboxOptionDescription, ComboboxOptionMeta, comboboxInputVariants };

package/dist/chunks/{chunk-33UFQJIO.mjs → chunk-BJMXZJWO.mjs}

@@ -32,6 +32,7 @@ var RadioGroup = React.forwardRef(
     value: controlledValue,
     defaultValue,
     size = "md",
+    variant = "default",
     disabled,
     onValueChange,
     children,
@@ -48,8 +49,8 @@ var RadioGroup = React.forwardRef(
       [isControlled, onValueChange]
     );
     const ctx = React.useMemo(
-      () => ({ name, value, size, disabled, onValueChange: handleChange }),
-      [name, value, size, disabled, handleChange]
+      () => ({ name, value, size, variant, disabled, onValueChange: handleChange }),
+      [name, value, size, variant, disabled, handleChange]
     );
     return /* @__PURE__ */ jsx(RadioGroupCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
       "div",
@@ -69,16 +70,21 @@ var RadioItem = React.forwardRef(
     className,
     value,
     size: sizeProp,
+    variant: variantProp,
     disabled: disabledProp,
     label,
+    description,
     children,
     ...props
   }, ref) => {
     const ctx = React.useContext(RadioGroupCtx);
     const size = sizeProp ?? ctx.size ?? "md";
+    const variant = variantProp ?? ctx.variant ?? "default";
     const disabled = disabledProp ?? ctx.disabled;
     const checked = ctx.value === value;
     const content = label ?? children;
+    const hasDescription = description !== void 0 && description !== null && description !== false;
+    const isRing = variant === "ring";
     const handleChange = React.useCallback(() => {
       ctx.onValueChange?.(value);
     }, [ctx, value]);
@@ -88,6 +94,7 @@ var RadioItem = React.forwardRef(
         className: cn(
           radioItemVariants({ size }),
           disabled ? "nexus-radio-item--disabled" : "nexus-radio-item--pointer",
+          hasDescription && "nexus-radio-item--with-description",
           className
         ),
         children: [
@@ -109,11 +116,12 @@ var RadioItem = React.forwardRef(
             "span",
             {
               className: cn(
-                size === "sm" ? "nexus-radio__circle--sm" : "nexus-radio__circle--md",
                 "nexus-radio__circle",
+                size === "sm" ? "nexus-radio__circle--sm" : "nexus-radio__circle--md",
+                isRing && "nexus-radio__circle--ring",
                 checked ? "nexus-radio__circle--checked" : "nexus-radio__circle--unchecked"
               ),
-              children: checked && /* @__PURE__ */ jsx(
+              children: checked && !isRing && /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
@@ -124,7 +132,10 @@ var RadioItem = React.forwardRef(
               )
             }
           ),
-          content && /* @__PURE__ */ jsx("span", { className: "nexus-radio__label", children: content })
+          (content || hasDescription) && /* @__PURE__ */ jsxs("span", { className: "nexus-radio__text", children: [
+            content && /* @__PURE__ */ jsx("span", { className: "nexus-radio__label", children: content }),
+            hasDescription && /* @__PURE__ */ jsx("span", { className: "nexus-radio__description", children: description })
+          ] })
         ]
       }
     );