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

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/radio-group/index.ts
var radio_group_exports = {};
__export(radio_group_exports, {
  RadioGroup: () => RadioGroup2
});
module.exports = __toCommonJS(radio_group_exports);

// src/radio-group/Radio.tsx
var import_class_variance_authority4 = require("class-variance-authority");
var import_react2 = require("react");

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

// src/radio-group/RadioInput.tsx
var import_form_field = require("@spark-ui/components/form-field");
var import_radix_ui2 = require("radix-ui");

// src/radio-group/RadioIndicator.tsx
var import_radix_ui = require("radix-ui");

// src/radio-group/RadioIndicator.styles.ts
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority = require("class-variance-authority");
var radioIndicatorStyles = (0, import_class_variance_authority.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: (0, import_internal_utils.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
var import_jsx_runtime = require("react/jsx-runtime");
var RadioIndicator = ({ intent, className, ref, ...others }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_radix_ui.RadioGroup.Indicator,
    {
      ref,
      className: radioIndicatorStyles({ intent, className }),
      ...others
    }
  );
};
RadioIndicator.displayName = "RadioGroup.RadioIndicator";

// src/radio-group/RadioInput.styles.ts
var import_internal_utils2 = require("@spark-ui/internal-utils");
var import_class_variance_authority2 = require("class-variance-authority");
var radioInputVariants = (0, import_class_variance_authority2.cva)(
  [
    "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: (0, import_internal_utils2.makeVariants)({
        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
var import_jsx_runtime2 = require("react/jsx-runtime");
var RadioInput = ({ intent: intentProp, className, ref, ...others }) => {
  const { state } = (0, import_form_field.useFormFieldControl)();
  const intent = state ?? intentProp;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    import_radix_ui2.RadioGroup.RadioGroupItem,
    {
      ref,
      className: radioInputVariants({ intent, className }),
      ...others,
      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadioIndicator, { intent, forceMount: true })
    }
  );
};
RadioInput.displayName = "RadioGroup.RadioInput";

// src/radio-group/RadioLabel.tsx
var import_radix_ui3 = require("radix-ui");

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

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

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

// src/radio-group/RadioGroup.tsx
var import_form_field2 = require("@spark-ui/components/form-field");
var import_radix_ui4 = require("radix-ui");

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

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

// src/radio-group/RadioGroup.tsx
var import_jsx_runtime6 = require("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 } = (0, import_form_field2.useFormFieldControl)();
  const required = requiredProp !== void 0 ? requiredProp : isRequired;
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupProvider, { reverse, intent, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    import_radix_ui4.RadioGroup.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";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  RadioGroup
});
//# sourceMappingURL=index.js.map