nextuiq/dist/index28.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 RadioSmComponent = 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: `flex cursor-pointer select-none items-center text-sm text-[oklch(var(--theme-muted-foreground))] ${disabled ? "cursor-not-allowed opacity-60" : ""} ${className}`,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "relative", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "input",
            {
              ref,
              type: "radio",
              id: radioId,
              name,
              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: `mr-2 flex h-4 w-4 items-center justify-center rounded-full border ${checked ? "border-[oklch(var(--theme-primary))] bg-[oklch(var(--theme-primary))]" : "bg-transparent border-[oklch(var(--theme-border))]"}`,
              "aria-hidden": "true",
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                "span",
                {
                  className: `h-1.5 w-1.5 rounded-full ${checked ? "bg-[oklch(var(--theme-primary-foreground))]" : "bg-[oklch(var(--theme-background))]"}`,
                  "aria-hidden": "true"
                }
              )
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-none", children: label })
      ]
    }
  );
});
RadioSmComponent.displayName = "RadioSm";
const RadioSm = RadioSmComponent;

export { RadioSm };