@spark-ui/components/dist/radio-group/index.mjs

Spark (Leboncoin design system) components.

// src/radio-group/Radio.tsx
import { cx } from "class-variance-authority";
import { useId } from "react";

// src/radio-group/RadioGroupContext.tsx
import { createContext, useContext } from "react";
var RadioGroupContext = createContext(null);
var useRadioGroup = () => {
  const context = useContext(RadioGroupContext);
  if (!context) {
    throw Error("useRadioGroup must be used within a RadioGroup provider");
  }
  return context;
};

// src/radio-group/RadioInput.tsx
import { useFormFieldControl } from "@spark-ui/components/form-field";
import { RadioGroup as RadixRadioGroup2 } from "radix-ui";

// src/radio-group/RadioIndicator.tsx
import { RadioGroup as RadixRadioGroup } from "radix-ui";

// src/radio-group/RadioIndicator.styles.ts
import { makeVariants } from "@spark-ui/internal-utils";
import { cva } from "class-variance-authority";
var radioIndicatorStyles = cva(
  [
    "relative block",
    "size-3/5",
    "after:absolute",
    "after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2",
    "after:h-0",
    "after:w-0",
    "after:block",
    "after:rounded-[50%]",
    "after:content-['']",
    "after:transition-all",
    "data-[state=checked]:after:size-full"
  ],
  {
    variants: {
      intent: makeVariants({
        main: ["after:bg-main"],
        support: ["after:bg-support"],
        accent: ["after:bg-accent"],
        basic: ["after:bg-basic"],
        neutral: ["after:bg-neutral"],
        success: ["after:bg-success"],
        alert: ["after:bg-alert"],
        error: ["after:bg-error"],
        info: ["after:bg-info"]
      })
    },
    defaultVariants: {
      intent: "basic"
    }
  }
);

// src/radio-group/RadioIndicator.tsx
import { jsx } from "react/jsx-runtime";
var RadioIndicator = ({ intent, className, ref, ...others }) => {
  return /* @__PURE__ */ jsx(
    RadixRadioGroup.Indicator,
    {
      ref,
      className: radioIndicatorStyles({ intent, className }),
      ...others
    }
  );
};
RadioIndicator.displayName = "RadioGroup.RadioIndicator";

// src/radio-group/RadioInput.styles.ts
import { makeVariants as makeVariants2 } from "@spark-ui/internal-utils";
import { cva as cva2 } from "class-variance-authority";
var radioInputVariants = cva2(
  [
    "flex shrink-0 items-center justify-center",
    "rounded-full",
    "border-md",
    "outline-hidden",
    "hover:ring-4",
    "focus-visible:u-outline",
    "disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent",
    "u-shadow-border-transition",
    "size-sz-24"
  ],
  {
    variants: {
      /**
       * Color scheme of the radio input.
       */
      intent: makeVariants2({
        main: ["border-outline", "data-[state=checked]:border-main", "hover:ring-main-container"],
        support: [
          "border-outline",
          "data-[state=checked]:border-support",
          "hover:ring-support-container"
        ],
        accent: [
          "border-outline",
          "data-[state=checked]:border-accent",
          "hover:ring-accent-container"
        ],
        basic: [
          "border-outline",
          "data-[state=checked]:border-basic",
          "hover:ring-basic-container"
        ],
        neutral: [
          "border-outline",
          "data-[state=checked]:border-neutral",
          "hover:ring-neutral-container"
        ],
        info: ["border-outline", "data-[state=checked]:border-info", "hover:ring-info-container"],
        success: [
          "border-outline",
          "data-[state=checked]:border-success",
          "hover:ring-success-container"
        ],
        alert: [
          "border-outline",
          "data-[state=checked]:border-alert",
          "hover:ring-alert-container"
        ],
        error: [
          "border-outline",
          "data-[state=checked]:border-error",
          "hover:ring-error-container"
        ]
      })
    },
    defaultVariants: {
      intent: "basic"
    }
  }
);

// src/radio-group/RadioInput.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var RadioInput = ({ intent: intentProp, className, ref, ...others }) => {
  const { state } = useFormFieldControl();
  const intent = state ?? intentProp;
  return /* @__PURE__ */ jsx2(
    RadixRadioGroup2.RadioGroupItem,
    {
      ref,
      className: radioInputVariants({ intent, className }),
      ...others,
      children: /* @__PURE__ */ jsx2(RadioIndicator, { intent, forceMount: true })
    }
  );
};
RadioInput.displayName = "RadioGroup.RadioInput";

// src/radio-group/RadioLabel.tsx
import { Label } from "radix-ui";

// src/radio-group/RadioLabel.styles.tsx
import { cva as cva3 } from "class-variance-authority";
var radioLabelStyles = cva3("grow", {
  variants: {
    disabled: {
      true: ["text-neutral/dim-2", "cursor-not-allowed"],
      false: ["cursor-pointer"]
    }
  },
  defaultVariants: {
    disabled: false
  }
});

// src/radio-group/RadioLabel.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var RadioLabel = ({ disabled, ...others }) => {
  return /* @__PURE__ */ jsx3(Label.Root, { className: radioLabelStyles({ disabled }), ...others });
};
RadioLabel.displayName = "RadioGroup.RadioLabel";

// src/radio-group/Radio.tsx
import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
var ID_PREFIX = ":radio";
var Radio = ({
  className,
  children,
  id,
  disabled: disabledProp,
  ref,
  ...others
}) => {
  const innerId = `${ID_PREFIX}-input-${useId()}`;
  const innerLabelId = `${ID_PREFIX}-label-${useId()}`;
  const { intent, disabled, reverse } = useRadioGroup();
  const radioLabel = children && /* @__PURE__ */ jsx4(RadioLabel, { disabled: disabledProp || disabled, htmlFor: id || innerId, id: innerLabelId, children });
  const radioInput = /* @__PURE__ */ jsx4(
    RadioInput,
    {
      ref,
      id: id || innerId,
      intent,
      "aria-labelledby": children ? innerLabelId : void 0,
      ...others,
      disabled: disabledProp
    }
  );
  const content = reverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
    radioLabel,
    radioInput
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
    radioInput,
    radioLabel
  ] });
  return /* @__PURE__ */ jsx4("div", { className: cx("gap-md text-body-1 flex items-start", className), children: content });
};
Radio.displayName = "RadioGroup.Radio";

// src/radio-group/RadioGroup.tsx
import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
import { RadioGroup as RadixRadioGroup3 } from "radix-ui";

// src/radio-group/RadioGroup.styles.ts
import { cva as cva4 } from "class-variance-authority";
var radioGroupStyles = cva4(["flex"], {
  variants: {
    orientation: {
      vertical: ["flex-col", "gap-lg"],
      horizontal: ["flex-row", "gap-xl"]
    }
  }
});

// src/radio-group/RadioGroupProvider.tsx
import { useMemo } from "react";
import { jsx as jsx5 } from "react/jsx-runtime";
var RadioGroupProvider = ({
  intent,
  disabled,
  reverse,
  children
}) => {
  const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse]);
  return /* @__PURE__ */ jsx5(RadioGroupContext.Provider, { value, children });
};

// src/radio-group/RadioGroup.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var RadioGroup = ({
  orientation = "vertical",
  loop = true,
  intent = "basic",
  disabled,
  className,
  required: requiredProp,
  reverse = false,
  ref,
  ...others
}) => {
  const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl2();
  const required = requiredProp !== void 0 ? requiredProp : isRequired;
  return /* @__PURE__ */ jsx6(RadioGroupProvider, { reverse, intent, disabled, children: /* @__PURE__ */ jsx6(
    RadixRadioGroup3.RadioGroup,
    {
      "data-spark-component": "radio-group",
      className: radioGroupStyles({ orientation, className }),
      name,
      ref,
      disabled,
      orientation,
      loop,
      required,
      "aria-labelledby": labelId,
      "aria-invalid": isInvalid,
      "aria-required": required,
      "aria-describedby": description,
      ...others
    }
  ) });
};
RadioGroup.displayName = "RadioGroup";

// src/radio-group/index.ts
var RadioGroup2 = Object.assign(RadioGroup, {
  Radio
});
RadioGroup2.displayName = "RadioGroup";
Radio.displayName = "RadioGroup.Radio";
export {
  RadioGroup2 as RadioGroup
};
//# sourceMappingURL=index.mjs.map