import { jsxs, jsx } from "react/jsx-runtime";
import "react";
import { getFontSize, getSize, getRadius } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import "clsx";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { CheckIcon } from "../Checkbox/CheckIcon.mjs";
import { useChipGroupContext } from "./ChipGroup.context.mjs";
import { ChipGroup } from "./ChipGroup/ChipGroup.mjs";
import classes from "./Chip.module.css.mjs";
import { useId } from "../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-id/use-id.mjs";
import { useUncontrolled } from "../../../../../../../@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
const defaultProps = {
  type: "checkbox"
};
const varsResolver = createVarsResolver(
  (theme, { size, radius, variant, color, autoContrast }) => {
    const colors = theme.variantColorResolver({
      color: color || theme.primaryColor,
      theme,
      variant: variant || "filled",
      autoContrast
    });
    return {
      root: {
        "--chip-fz": getFontSize(size),
        "--chip-size": getSize(size, "chip-size"),
        "--chip-radius": radius === void 0 ? void 0 : getRadius(radius),
        "--chip-checked-padding": getSize(size, "chip-checked-padding"),
        "--chip-padding": getSize(size, "chip-padding"),
        "--chip-icon-size": getSize(size, "chip-icon-size"),
        "--chip-bg": color || variant ? colors.background : void 0,
        "--chip-hover": color || variant ? colors.hover : void 0,
        "--chip-color": color || variant ? colors.color : void 0,
        "--chip-bd": color || variant ? colors.border : void 0,
        "--chip-spacing": getSize(size, "chip-spacing")
      }
    };
  }
);
const Chip = factory((_props, ref) => {
  const props = useProps("Chip", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    id,
    checked,
    defaultChecked,
    onChange,
    value,
    wrapperProps,
    type,
    disabled,
    children,
    size,
    variant,
    icon,
    rootRef,
    autoContrast,
    mod,
    ...others
  } = props;
  const getStyles = useStyles({
    name: "Chip",
    classes,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const ctx = useChipGroupContext();
  const uuid = useId(id);
  const { styleProps, rest } = extractStyleProps(others);
  const [_value, setValue] = useUncontrolled({
    value: checked,
    defaultValue: defaultChecked,
    finalValue: false,
    onChange
  });
  const contextProps = ctx ? {
    checked: ctx.isChipSelected(value),
    onChange: (event) => {
      ctx.onChange(event);
      onChange == null ? void 0 : onChange(event.currentTarget.checked);
    },
    type: ctx.multiple ? "checkbox" : "radio"
  } : {};
  const _checked = contextProps.checked || _value;
  return /* @__PURE__ */ jsxs(
    Box,
    {
      size,
      variant,
      ref: rootRef,
      mod,
      ...getStyles("root"),
      ...styleProps,
      ...wrapperProps,
      children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            type,
            ...getStyles("input"),
            checked: _checked,
            onChange: (event) => setValue(event.currentTarget.checked),
            id: uuid,
            disabled,
            ref,
            value,
            ...contextProps,
            ...rest
          }
        ),
        /* @__PURE__ */ jsxs(
          "label",
          {
            htmlFor: uuid,
            "data-checked": _checked || void 0,
            "data-disabled": disabled || void 0,
            ...getStyles("label", { variant: variant || "filled" }),
            children: [
              _checked && /* @__PURE__ */ jsx("span", { ...getStyles("iconWrapper"), children: icon || /* @__PURE__ */ jsx(CheckIcon, { ...getStyles("checkIcon") }) }),
              /* @__PURE__ */ jsx("span", { children })
            ]
          }
        )
      ]
    }
  );
});
Chip.classes = classes;
Chip.displayName = "@mantine/core/Chip";
Chip.Group = ChipGroup;
export {
  Chip
};
