import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, b as $0393f8ab869a0f1a$export$c17561cb55d4db30 } from "../../Button-npzfSoYo.js";
import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-cvK1vxO7.js";
import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-DJApHXhY.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import React__default, { useState, useRef, forwardRef, createContext, cloneElement } from "react";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { c as cva } from "../../index-Dq3gT5pW.js";
import { Tooltip } from "../tooltip/tooltip.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { icons } from "../../icons/icons.js";
import "../../react-jsx-parser.min-LF707GK8.js";
function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
  let [isInToolbar, setInToolbar] = useState(false);
  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
    var _ref_current_parentElement;
    setInToolbar(!!(ref.current && ((_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.closest('[role="toolbar"]'))));
  });
  const { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
  const shouldReverse = direction === "rtl" && orientation === "horizontal";
  let focusManager = $9bf71ea28793e738$export$c5251b9e124bf29(ref);
  const onKeyDown = (e) => {
    if (!e.currentTarget.contains(e.target)) return;
    if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
      if (shouldReverse) focusManager.focusPrevious();
      else focusManager.focusNext();
    } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
      if (shouldReverse) focusManager.focusNext();
      else focusManager.focusPrevious();
    } else if (e.key === "Tab") {
      e.stopPropagation();
      lastFocused.current = document.activeElement;
      if (e.shiftKey) focusManager.focusFirst();
      else focusManager.focusLast();
      return;
    } else
      return;
    e.stopPropagation();
    e.preventDefault();
  };
  const lastFocused = useRef(null);
  const onBlur = (e) => {
    if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
  };
  const onFocus = (e) => {
    var _ref_current;
    if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) {
      var _lastFocused_current;
      (_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.focus();
      lastFocused.current = null;
    }
  };
  return {
    toolbarProps: {
      ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
        labelable: true
      }),
      role: !isInToolbar ? "toolbar" : "group",
      "aria-orientation": orientation,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabel == null ? ariaLabelledBy : void 0,
      onKeyDownCapture: !isInToolbar ? onKeyDown : void 0,
      onFocusCapture: !isInToolbar ? onFocus : void 0,
      onBlurCapture: !isInToolbar ? onBlur : void 0
    }
  };
}
const $13c3c67164f4d5be$export$6311e7ab80ef752f = /* @__PURE__ */ createContext({});
const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef(function Toolbar(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $13c3c67164f4d5be$export$6311e7ab80ef752f);
  let { toolbarProps } = $2680b1829e803644$export$fa142eb1681c520(props, ref);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    values: {
      orientation: props.orientation || "horizontal"
    },
    defaultClassName: "react-aria-Toolbar"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  return /* @__PURE__ */ React__default.createElement("div", {
    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, toolbarProps),
    ref,
    slot: props.slot || void 0,
    "data-orientation": props.orientation || "horizontal"
  }, renderProps.children);
});
/**
 * @typedef {Object} ButtonProps
 * @property {JSX.Element} [props.icon] - Icon to display within the button.
 * @property {ButtonSize} [props.size='default'] - The size of the button.
 * @property {ButtonType} [props.type='default'] - The type of the button.
 * @property {boolean} [props.disabled] - If `true`, the button is disabled.
 * @property {string} [props.className] - Classes to pass to the button.
 * @property {string|boolean} [props.tooltip] - Tooltip text to display on hover. If set to `true` and an `aria-label` is not provided, the tooltip text will be used as the `aria-label`.
 * @property {Function} [props.onPress] - Function to run when the button is pressed.
 * @property {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
 * @property {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
 * @property {TooltipProps} [props.tooltipProps] - Props to pass to the tooltip.
 * @property {boolean} [props.pending] - If `true`, the button is in a pending state, which can be used to indicate that an action is being processed.
 * @property {string} [props.pendingAriaLabel='Loading'] - ARIA label for the pending state, used for screen readers.
 * @property {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @typedef {'small' | 'default' | 'large'} ButtonSize
 * @typedef {'default' | 'selected' | 'selectedGhost' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
 *
 * @preserve
 */
/**
 * A simple button component.
 *
 * @component
 * @param {ButtonProps} props - Component props.
 *
 * @returns {JSX.Element} The Button component.
 *
 * @example
 * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
 *
 * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon}>My button</Button>
 *
 * @preserve
 */
const Button = (props) => {
  const {
    children,
    icon,
    size = "default",
    type = "default",
    pending,
    pendingAriaLabel = __("Loading", "eightshift-ui-components"),
    disabled,
    className,
    tooltip: rawTooltip,
    onPress,
    forwardedRef,
    wrapperClassName,
    tooltipProps,
    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components"),
    hidden,
    ...other
  } = props;
  let tooltip = rawTooltip;
  if (rawTooltip === true && ariaLabel?.length > 0) {
    tooltip = ariaLabel;
  }
  const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
  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:not-pending:cursor-pointer",
      "es:shrink-0",
      "es:pending:shadow-none! es:pending:cursor-wait",
      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",
          selected: "es:bg-radial-[at_50%_125%] es:inset-ring es:inset-shadow-xs",
          danger: "es:bg-radial-[at_50%_125%] es:inset-ring es:inset-shadow-xs",
          ghost: "es:border-transparent es:text-secondary-700 es:enabled:hover:bg-secondary-100 es:enabled:active:bg-accent-50 es:enabled:pressed:bg-accent-50 es:enabled:active:text-accent-950 es:enabled:pressed:text-accent-950 es:disabled:border-transparent!",
          dangerGhost: [
            "es:border-transparent es:text-red-700",
            "es:enabled:hover:bg-red-500/5 es:enabled:active:bg-red-500/10 es:enabled:pressed:bg-red-500/10",
            "es:focus-visible:text-red-700",
            "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
            "es:disabled:border-transparent!"
          ],
          selectedGhost: [
            "es:border-transparent es:text-accent-600",
            "es:enabled:hover:bg-accent-500/5 es:enabled:active:bg-accent-500/10 es:enabled:pressed:bg-accent-500/10",
            "es:focus-visible:text-accent-700",
            "es:focus-visible:ring-accent-500/30 es:focus-visible:border-accent-500 es:focus-visible:inset-ring-accent-100",
            "es:disabled:border-transparent!"
          ]
        }
      },
      compoundVariants: [
        // Styles.
        {
          type: "default",
          disabled: false,
          class: [
            "es:text-black",
            "es:from-white es:to-secondary-50",
            "es:border-secondary-300",
            "es:inset-ring-secondary-100",
            "es:inset-shadow-secondary-100/50",
            "es:shadow-sm",
            "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed: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: "selected",
          disabled: false,
          class: [
            "es:text-white",
            "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 es:shadow-accent-600/30 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
          ]
        },
        {
          type: "danger",
          disabled: false,
          class: [
            "es:text-red-700",
            "es:from-red-50/75 es:to-white",
            "es:border-red-700/50",
            "es:inset-ring-red-100",
            "es:inset-shadow-red-50",
            "es:hover:inset-shadow-red-100 es:hover:inset-ring-red-100 es:hover:text-red-800 es:hover:border-red-600",
            "es:focus-visible:text-red-900",
            "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
            "es:shadow es:shadow-red-700/20 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
          ]
        },
        {
          disabled: true,
          class: "es:disabled:border-zinc-300 es:disabled:text-zinc-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
        },
        // 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: {
        disabled: false
      }
    }
  );
  const component = /* @__PURE__ */ jsx(
    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
    {
      onPress,
      isDisabled: disabled,
      isPending: pending,
      className: componentClasses({
        disabled: !pending && disabled,
        hasIcon: pending || Boolean(icon),
        iconOnly: pending || Boolean(icon && !children),
        size,
        type
      }),
      ref: objRef,
      "aria-label": ariaLabel,
      ...other,
      children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        !isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
          icon,
          children
        ] }),
        isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            $0393f8ab869a0f1a$export$c17561cb55d4db30,
            {
              "aria-label": pendingAriaLabel,
              className: "es:sr-only",
              isIndeterminate: true
            }
          ),
          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-1750" })
        ] })
      ] })
    }
  );
  if (!tooltip) {
    return component;
  }
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      text: tooltip,
      wrapperClassName,
      ...tooltipProps,
      children: component
    }
  );
};
/**
 * A wrapper for `Button` or `ToggleButton` components that visually groups them and ensures proper keyboard navigation.
 *
 * **Note**: Only intended for horizontal groups of buttons that don't wrap.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.className] - Classes to pass to the button group container.
 * @param {boolean} [props.vertical] - If `true`, the buttons are displayed vertically.
 * @param {ButtonGroupType} [props.type='segmented'] - The way the button group is laid out.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The ButtonGroup component.
 *
 * @typedef {'segmented' | 'split'} ButtonGroupType
 *
 * @example
 * <ButtonGroup>
 *     <Button />
 *     <Button />
 *     <Button />
 * </ButtonGroup>
 *
 * @preserve
 */
const ButtonGroup = ({ children, className, vertical, hidden, type = "segmented", ...rest }) => {
  if (hidden) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    $13c3c67164f4d5be$export$4c260019440d418f,
    {
      className: clsx(
        "es:flex",
        vertical && "es:flex-col",
        type === "segmented" && vertical && "es-button-group-v es:-space-y-px!",
        type === "segmented" && !vertical && "es-button-group-h es:-space-x-px!",
        type === "split" && vertical && "es:space-y-1",
        type === "split" && !vertical && "es:space-x-1.5",
        className
      ),
      orientation: vertical ? "vertical" : "horizontal",
      ...rest,
      children
    }
  );
};
export {
  Button,
  ButtonGroup
};
