nextuiq/dist/index27.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { forwardRef, useId } from 'react';

const RadioComponent = forwardRef(({
  id,
  name,
  value,
  checked,
  label,
  onChange,
  className = "",
  disabled = false,
  required = false,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}, ref) => {
  const uniqueId = useId();
  const radioId = id || uniqueId;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "label",
    {
      htmlFor: radioId,
      className: `relative flex cursor-pointer select-none items-center gap-3 text-sm font-medium ${disabled ? "text-[oklch(var(--theme-muted-foreground))] cursor-not-allowed" : "text-[oklch(var(--theme-foreground))]"} ${className}`,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "input",
          {
            ref,
            id: radioId,
            name,
            type: "radio",
            value,
            checked,
            onChange: () => !disabled && onChange(value),
            disabled,
            required,
            "aria-label": ariaLabel || label,
            "aria-describedby": ariaDescribedby,
            "aria-checked": checked,
            className: "sr-only",
            ...props
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "span",
          {
            className: `flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${checked ? "border-[oklch(var(--theme-primary))] bg-[oklch(var(--theme-primary))]" : "bg-transparent border-[oklch(var(--theme-border))]"} ${disabled ? "bg-[oklch(var(--theme-muted))] border-[oklch(var(--theme-border))]" : ""}`,
            "aria-hidden": "true",
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
              "span",
              {
                className: `h-2 w-2 rounded-full bg-[oklch(var(--theme-primary-foreground))] ${checked ? "block" : "hidden"}`,
                "aria-hidden": "true"
              }
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none", children: label })
      ]
    }
  );
});
RadioComponent.displayName = "Radio";
const Radio = RadioComponent;

export { Radio };