import { jsxs, jsx } from "react/jsx-runtime";
import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-cvK1vxO7.js";
import React__default, { createContext, forwardRef, useContext } from "react";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CiAradXs.js";
import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-Bn4ZT295.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
import { c as cva } from "../../index-Dq3gT5pW.js";
import { Tooltip } from "../tooltip/tooltip.js";
function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
  const { isSelected } = state;
  const { isPressed, buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
    ...props,
    onPress: $ff5963eb1fccf552$export$e08e3b67e392101e(state.toggle, props.onPress)
  }, ref);
  return {
    isPressed,
    isSelected,
    isDisabled: props.isDisabled || false,
    buttonProps: $3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, {
      "aria-pressed": isSelected
    })
  };
}
function $4547d1bf40011fdf$export$bc53712daae3d6e6(props, state, ref) {
  let toggleState = {
    isSelected: state.selectedKeys.has(props.id),
    defaultSelected: false,
    setSelected(isSelected2) {
      state.setSelected(props.id, isSelected2);
    },
    toggle() {
      state.toggleKey(props.id);
    }
  };
  let { isPressed, isSelected, isDisabled, buttonProps } = $55f54f7887471b58$export$51e84d46ca0bc451({
    ...props,
    id: void 0,
    isDisabled: props.isDisabled || state.isDisabled
  }, toggleState, ref);
  if (state.selectionMode === "single") {
    buttonProps.role = "radio";
    buttonProps["aria-checked"] = toggleState.isSelected;
    delete buttonProps["aria-pressed"];
  }
  return {
    isPressed,
    isSelected,
    isDisabled,
    buttonProps
  };
}
const $84b7d8702d4ff4a8$export$a8a71863db173133 = /* @__PURE__ */ createContext(null);
const $efde0372d7a700fe$export$43506d75ebd2e218 = /* @__PURE__ */ createContext({});
const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(function ToggleButton(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $efde0372d7a700fe$export$43506d75ebd2e218);
  let groupState = useContext($84b7d8702d4ff4a8$export$a8a71863db173133);
  let state = $3017fa7ffdddec74$export$8042c6c013fd5226(groupState && props.id != null ? {
    isSelected: groupState.selectedKeys.has(props.id),
    onChange(isSelected2) {
      groupState.setSelected(props.id, isSelected2);
    }
  } : props);
  let { buttonProps, isPressed, isSelected, isDisabled } = groupState && props.id != null ? $4547d1bf40011fdf$export$bc53712daae3d6e6({
    ...props,
    id: props.id
  }, groupState, ref) : $55f54f7887471b58$export$51e84d46ca0bc451({
    ...props,
    id: props.id != null ? String(props.id) : void 0
  }, state, ref);
  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    id: void 0,
    values: {
      isHovered,
      isPressed,
      isFocused,
      isSelected: state.isSelected,
      isFocusVisible,
      isDisabled,
      state
    },
    defaultClassName: "react-aria-ToggleButton"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  delete DOMProps.onClick;
  return /* @__PURE__ */ React__default.createElement("button", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
    ref,
    slot: props.slot || void 0,
    "data-focused": isFocused || void 0,
    "data-disabled": isDisabled || void 0,
    "data-pressed": isPressed || void 0,
    "data-selected": isSelected || void 0,
    "data-hovered": isHovered || void 0,
    "data-focus-visible": isFocusVisible || void 0
  });
});
/**
 * A simple toggle button component.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display within the button.
 * @param {ToggleButtonSize} [props.size='default'] - The size of the button.
 * @param {ToggleButtonType} [props.type='default'] - The type of the button.
 * @param {boolean} [props.disabled] - If `true`, the button is disabled.
 * @param {string} [props.className] - Classes to pass to the button.
 * @param {string|boolean} [props.tooltip] - Tooltip text to display on hover.
 * @param {boolean} props.selected - Whether the button is selected.
 * @param {Function} [props.onChange] - Function to run when the toggle state changes.
 * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
 * @param {TooltipProps} [props.tooltipProps] - Props to pass to the tooltip.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The ToggleButton component.
 *
 * @typedef {'small' | 'default' | 'large'} ToggleButtonSize
 * @typedef {'default'| 'ghost'} ToggleButtonType
 *
 * @example
 * const [selected, setSelected] = useState(false);
 *
 * <ToggleButton
 * 	selected={selected}
 * 	onChange={setSelected}
 * 	icon={icons.myIcon}
 * 	/>
 *
 * <ToggleButton
 * 		selected={selected}
 * 		onChange={setSelected}
 * 		icon={icons.myIcon}
 * >
 * 		My button
 * </ToggleButton>
 *
 * @preserve
 */
const ToggleButton2 = (props) => {
  const {
    children,
    icon,
    size = "default",
    type = "default",
    disabled,
    className,
    tooltip: rawTooltip,
    selected,
    onChange,
    wrapperClassName,
    tooltipProps,
    hidden,
    "aria-label": ariaLabel,
    ...other
  } = props;
  if (hidden) {
    return null;
  }
  const componentClasses = cva(
    [
      "es:flex es:items-center es:gap-1",
      "es:transition es:duration-300 es:border es:text-sm",
      "es:any-focus:outline-hidden es:focus-visible:z-10",
      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
      "es:focus-visible:border-accent-500",
      "es:btn-group-mid:rounded-none",
      "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
      "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
      "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm",
      "es:cursor-pointer",
      icon && children ? "es:justify-start" : "es:justify-center",
      className
    ],
    {
      variants: {
        size: {
          small: "es:icon:size-5 es:rounded-7",
          default: "es:icon:size-5 es:rounded-10",
          large: "es:icon:size-6 es:rounded-xl"
        },
        type: {
          default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"]
        }
      },
      compoundVariants: [
        {
          type: "default",
          disabled: false,
          selected: false,
          class: [
            "es:text-black",
            "es:from-secondary-50 es:to-white",
            "es:border-secondary-300",
            "es:inset-ring-secondary-100",
            "es:inset-shadow-secondary-100/50",
            "es:shadow-sm",
            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
            "es:hover:text-accent-950",
            "es:focus-visible:text-accent-950"
          ]
        },
        {
          type: "default",
          disabled: false,
          selected: true,
          class: [
            "es:text-white es:accent-text-shadow",
            "es:from-accent-500 es:to-accent-600",
            "es:border-accent-700",
            "es:inset-ring es:inset-ring-accent-600",
            "es:inset-shadow-xs es:inset-shadow-accent-400/75",
            "es:focus-visible:border-accent-700",
            "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
            "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
            "es:shadow-sm es:shadow-accent-600/30"
          ]
        },
        {
          disabled: true,
          class: "es:disabled:border-secondary-300 es:disabled:text-secondary-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
        },
        {
          type: "ghost",
          disabled: false,
          selected: true,
          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-sm es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
        },
        // Sizes.
        {
          size: "small",
          iconOnly: false,
          class: "es:h-7 es:min-w-7"
        },
        {
          size: "small",
          iconOnly: true,
          class: "es:size-7"
        },
        {
          size: "small",
          hasIcon: false,
          iconOnly: false,
          class: "es:px-2"
        },
        {
          size: "small",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-1"
        },
        {
          size: "default",
          iconOnly: false,
          class: "es:h-9 es:min-w-9"
        },
        {
          size: "default",
          iconOnly: true,
          class: "es:size-9"
        },
        {
          size: "default",
          hasIcon: false,
          iconOnly: false,
          class: "es:px-2"
        },
        {
          size: "default",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-1.5"
        },
        {
          size: "large",
          iconOnly: false,
          class: "es:h-10 es:min-w-10"
        },
        {
          size: "large",
          iconOnly: true,
          class: "es:size-10"
        },
        {
          size: "large",
          hasIcon: false,
          iconOnly: false,
          class: "es:px-4"
        },
        {
          size: "large",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-2"
        }
      ],
      defaultVariants: {
        selected: false,
        disabled: false
      }
    }
  );
  let tooltip = rawTooltip;
  if (rawTooltip === true && ariaLabel?.length > 0) {
    tooltip = ariaLabel;
  }
  const component = /* @__PURE__ */ jsxs(
    $efde0372d7a700fe$export$d2b052e7b4be1756,
    {
      isSelected: selected,
      onChange,
      isDisabled: disabled,
      className: componentClasses({
        disabled,
        selected,
        hasIcon: Boolean(icon),
        iconOnly: Boolean(icon && !children),
        size,
        type
      }),
      ...other,
      children: [
        icon,
        children
      ]
    }
  );
  if (!tooltip) {
    return component;
  }
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      text: tooltip,
      wrapperClassName,
      ...tooltipProps,
      children: component
    }
  );
};
export {
  ToggleButton2 as ToggleButton
};
