import { jsxs, jsx } from "react/jsx-runtime";
import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-DGpXyJOJ.js";
import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
import $dbSRa$react__default, { createContext, forwardRef, useContext } from "react";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-VkXJjsru.js";
import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-DdZrS1Kz.js";
import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
import { c as cva } from "../../index-BHpUy2Ix.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__ */ $dbSRa$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
  }, /* @__PURE__ */ $dbSRa$react__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
    value: {
      isSelected
    }
  }, renderProps.children));
});
/**
 * @typedef {import('../tooltip/tooltip').TooltipProps} TooltipProps
 *
 * @preserve
 * */
/**
 * 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.flat] - If `true`, component will look more flat (applies only to `default` type). Useful for nested layer of controls.
 * @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' | 'simple'} 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,
    flat,
    hidden,
    "aria-label": ariaLabel,
    ...other
  } = props;
  if (hidden) {
    return null;
  }
  const componentClasses = cva(
    [
      'es:font-variation-["wdth"_80,"YTLC"_520,"wdth"_64,"wght"_375]',
      "es:flex es:items-center",
      "es:transition-plus es:duration-300 es:ease-spring-snappy es:text-13",
      "es:any-focus:outline-hidden",
      "es:focus-visible:ring-2",
      "es:shrink-0",
      "es:text-box-trim",
      "es:leading-none",
      "es:icon:size-5",
      !disabled && "es:cursor-pointer",
      icon && children ? "es:justify-start" : "es:justify-center-safe",
      className
    ],
    {
      variants: {
        size: {
          small: "es:gap-0.75",
          default: "es:gap-1.25",
          large: "es:gap-1.5"
        },
        selected: {
          false: [
            "es:btn-group-h:not-pressed:not-after-current:not-first:rounded-l-sm",
            "es:btn-group-h:not-pressed:not-before-current:not-last:rounded-r-sm",
            "es:btn-group-v:not-pressed:not-after-current:not-first:rounded-t-sm",
            "es:btn-group-v:not-pressed:not-before-current:not-last:rounded-b-sm"
          ]
        }
      },
      compoundVariants: [
        {
          size: "small",
          selected: true,
          class: "es:rounded-14"
        },
        {
          size: "default",
          selected: true,
          class: "es:rounded-18"
        },
        {
          size: "large",
          selected: true,
          class: "es:rounded-3xl"
        },
        {
          size: "small",
          selected: false,
          class: "es:rounded-md es:hover:rounded-10! es:pressed:rounded-14!"
        },
        {
          size: "default",
          selected: false,
          class: "es:rounded-10 es:hover:rounded-xl! es:pressed:rounded-18!"
        },
        {
          size: "large",
          selected: false,
          class: "es:rounded-xl es:hover:rounded-2xl! es:pressed:rounded-3xl!"
        },
        // Default
        {
          type: "default",
          disabled: false,
          selected: false,
          class: [
            "es:text-black",
            "es:bg-linear-to-b es:from-black/2 es:to-black/4 es:from-25% es:bg-white",
            "es:inset-ring es:inset-ring-secondary-800/20",
            "es:inset-shadow-sm es:inset-shadow-white/75",
            !flat && "es:shadow-xs es:shadow-black/5",
            "es:hover:bg-surface-100 es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10",
            "es:pressed:bg-surface-100 es:pressed:text-accent-950 es:pressed:inset-ring-surface-300 es:pressed:inset-shadow-white/10",
            "es:focus-visible:ring-accent-500/30 es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50"
          ]
        },
        {
          type: "default",
          disabled: false,
          selected: true,
          class: [
            'es:font-variation-["wdth"_80,"YTLC"_520,"wdth"_64,"wght"_375,"GRAD"_150]',
            "es:any-icon:drop-shadow-xs es:any-icon:drop-shadow-accent-800/25",
            "es:text-white es:text-shadow-xs es:text-shadow-accent-900/30",
            "es:bg-linear-to-b es:from-accent-800/10 es:to-accent-800/30 es:bg-accent-500 es:from-30%",
            "es:inset-ring es:inset-ring-accent-600",
            "es:inset-shadow-sm es:inset-shadow-accent-50/25",
            !flat && "es:shadow-xs es:shadow-accent-900/30",
            "es:hover:from-accent-800/20 es:hover:to-accent-800/40",
            "es:pressed:from-accent-800/30 es:pressed:to-accent-800/50",
            "es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-700 es:focus-visible:bg-accent-600"
          ]
        },
        // Simple
        {
          type: "simple",
          disabled: false,
          selected: false,
          class: [
            "es:text-black",
            "es:bg-secondary-50 es:bg-linear-to-br es:from-surface-500/2 es:to-surface-500/10",
            "es:hover:bg-surface-100 es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10 es:hover:to-accent-700/5",
            "es:pressed:bg-surface-100 es:pressed:text-accent-950 es:pressed:inset-ring-surface-300 es:pressed:inset-shadow-white/10",
            "es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50"
          ]
        },
        {
          type: "simple",
          disabled: false,
          selected: true,
          class: [
            "es:text-white",
            "es:bg-linear-to-br es:from-accent-600/55 es:to-accent-600/90 es:text-white",
            "es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50",
            "es:inset-ring es:inset-ring-accent-800/15"
          ]
        },
        // Ghost
        {
          type: "ghost",
          disabled: false,
          selected: false,
          class: [
            "es:bg-white",
            "es:bg-linear-to-br es:from-surface-200/0 es:to-surface-200/0 es:text-secondary-700",
            "es:hover:from-surface-200/30 es:hover:to-surface-200/50 es:hover:text-accent-950",
            "es:pressed:from-accent-600/5 es:pressed:to-accent-600/15 es:pressed:text-accent-900",
            "es:focus-visible:bg-accent-50 es:focus-visible:text-accent-950 es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:inset-ring-accent-500"
          ]
        },
        {
          type: "ghost",
          disabled: false,
          selected: true,
          class: [
            "es:bg-white",
            "es:bg-linear-to-br es:from-accent-600/70 es:to-accent-600/90 es:text-white",
            "es:inset-ring es:inset-ring-accent-800/15",
            "es:focus-visible:bg-accent-50 es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:inset-ring-accent-500"
          ]
        },
        {
          type: ["default"],
          disabled: true,
          class: [
            "es:bg-linear-to-br es:from-secondary-50 es:to-secondary-100",
            "es:text-secondary-400 es:any-icon:text-secondary-400/50",
            "es:inset-ring es:inset-ring-secondary-200"
          ]
        },
        {
          type: ["ghost"],
          disabled: true,
          class: ["es:text-secondary-500 es:any-icon:text-secondary-500/50"]
        },
        // Sizes.
        {
          size: "small",
          iconOnly: false,
          class: "es:h-8 es:min-w-8"
        },
        {
          size: "small",
          iconOnly: true,
          class: "es:size-8"
        },
        {
          size: "small",
          hasIcon: false,
          iconOnly: false,
          class: "es:px-2"
        },
        {
          size: "small",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-1.5"
        },
        {
          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.5"
        },
        {
          size: "default",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-2"
        },
        {
          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-3"
        },
        {
          size: "large",
          hasIcon: true,
          iconOnly: false,
          class: "es:px-2.5"
        }
      ],
      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
};
