@vela-ui/react/dist/chunk-JAMOAJOO.mjs

Vela UI React components

import {
  Description,
  FieldError,
  Label
} from "./chunk-FFLNGARZ.mjs";
import {
  cn,
  composeTailwindRenderProps
} from "./chunk-OCN72JL6.mjs";
import {
  CircleIcon
} from "./chunk-P3WZ5OAJ.mjs";
import {
  focusRing
} from "./chunk-2FWUIDJB.mjs";

// src/components/radio.tsx
import {
  Radio as AriaRadio,
  RadioGroup as AriaRadioGroup,
  composeRenderProps
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function RadioGroupRoot({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaRadioGroup,
    {
      "data-slot": "radio-group",
      className: composeTailwindRenderProps(className, "group flex flex-col gap-2"),
      ...props
    }
  );
}
function RadioGroup({
  wrapperClassName,
  children,
  label,
  description,
  errorMessage,
  ...props
}) {
  return /* @__PURE__ */ jsx(RadioGroupRoot, { ...props, children: composeRenderProps(children, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
    label && /* @__PURE__ */ jsx(Label, { children: label }),
    /* @__PURE__ */ jsx(
      "div",
      {
        "data-slot": "radio-group-wrapper",
        className: cn(
          "flex gap-2 select-none group-data-[orientation=horizontal]:flex-wrap group-data-[orientation=vertical]:flex-col",
          wrapperClassName
        ),
        children: children2
      }
    ),
    description && /* @__PURE__ */ jsx(Description, { children: description }),
    /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
  ] })) });
}
var radioVariants = tv({
  base: "group flex items-center gap-2 text-sm transition",
  variants: {
    isDisabled: {
      true: "text-foreground/50 cursor-not-allowed"
    }
  }
});
var radioIndicatorVariants = tv({
  extend: focusRing,
  base: "border-input text-primary dark:bg-input/30 relative flex aspect-square shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow]",
  variants: {
    size: {
      sm: "size-4 [&_svg]:size-2",
      md: "size-5 [&_svg]:size-2.5",
      lg: "size-6 [&_svg]:size-3"
    },
    isDisabled: {
      true: "cursor-not-allowed opacity-50"
    }
  },
  defaultVariants: {
    size: "md"
  }
});
function Radio({ className, children, indicatorClassName, size, ...props }) {
  return /* @__PURE__ */ jsx(
    AriaRadio,
    {
      className: composeRenderProps(
        className,
        (className2, renderProps) => radioVariants({ ...renderProps, className: className2 })
      ),
      ...props,
      children: composeRenderProps(children, (children2, { isSelected, ...renderProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            "data-slot": "radio-indicator",
            className: radioIndicatorVariants({
              size,
              ...renderProps,
              className: indicatorClassName
            }),
            children: isSelected ? /* @__PURE__ */ jsx(CircleIcon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-current" }) : null
          }
        ),
        children2
      ] }))
    }
  );
}

export {
  RadioGroupRoot,
  RadioGroup,
  Radio
};