@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/button-COTeluL8.js

@@ -0,0 +1,524 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, l as $df56164dff5785e2$export$4338b53315abf666, n as $64fa3d84918910a7$export$29f1550f4b0d4415, o as $64fa3d84918910a7$export$df3a06d6289f983e, r as $64fa3d84918910a7$export$4d86445c2cf5e3, u as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-B_uiqNa4.js";
+import { H as $d4ee10de306f2510$export$e58f029f0fbfdb29, V as $d4ee10de306f2510$export$cd4e5573fbe2b576, z as $d4ee10de306f2510$export$4282f70798064fe0 } from "./useHover-qaMm3XFO.js";
+import { i as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./FocusScope-CgwbGOBB.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, r as $0393f8ab869a0f1a$export$c17561cb55d4db30 } from "./Button-h6xF_WrP.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-C-XNeJ_l.js";
+import { n as Tooltip } from "./tooltip-BzJzYlcc.js";
+import { t as cva } from "./dist-DIK9pFxO.js";
+import { t as __ } from "./build-module-sxK3nxOK.js";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-aria/toolbar/dist/useToolbar.mjs
+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 (!$d4ee10de306f2510$export$4282f70798064fe0(e.currentTarget, $d4ee10de306f2510$export$e58f029f0fbfdb29(e))) 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 = $d4ee10de306f2510$export$cd4e5573fbe2b576();
+			if (e.shiftKey) focusManager.focusFirst();
+			else focusManager.focusLast();
+			return;
+		} else return;
+		e.stopPropagation();
+		e.preventDefault();
+	};
+	const lastFocused = useRef(null);
+	const onBlur = (e) => {
+		if (!$d4ee10de306f2510$export$4282f70798064fe0(e.currentTarget, e.relatedTarget) && !lastFocused.current) lastFocused.current = $d4ee10de306f2510$export$e58f029f0fbfdb29(e);
+	};
+	const onFocus = (e) => {
+		if (lastFocused.current && !$d4ee10de306f2510$export$4282f70798064fe0(e.currentTarget, e.relatedTarget) && $d4ee10de306f2510$export$4282f70798064fe0(ref.current, $d4ee10de306f2510$export$e58f029f0fbfdb29(e))) {
+			var _lastFocused_current;
+			(_lastFocused_current = lastFocused.current) === null || _lastFocused_current === 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
+	} };
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/Toolbar.mjs
+var $13c3c67164f4d5be$export$6311e7ab80ef752f = createContext({});
+var $13c3c67164f4d5be$export$4c260019440d418f = 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 React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.div, {
+		...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, toolbarProps),
+		ref,
+		slot: props.slot || void 0,
+		"data-orientation": props.orientation || "horizontal"
+	}, renderProps.children);
+});
+//#endregion
+//#region lib/components/button/button.jsx
+/**
+* @typedef {import('../tooltip/tooltip').TooltipProps} TooltipProps
+* */
+/**
+* @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.flat] - If `true`, component will look more flat (applies only to `default`, `selected`, and `danger` types). Useful for nested layer of controls.
+* @property {boolean} [props.hidden] - If `true`, the component is not rendered.
+*
+* @typedef {'small' | 'default' | 'large'} ButtonSize
+* @typedef {'default' | 'selected' | 'selectedGhost' | 'ghost' | 'danger' | 'dangerGhost' | 'glass' | 'glassDark' | 'dangerGlass' | 'selectedGlass' | 'simple' | 'selectedSimple' | 'dangerSimple' } ButtonType
+*/
+/**
+* A simple button component.
+*
+* @component
+* @param {ButtonProps} props - Component props.
+*
+* @returns {JSX.Element} The Button component.
+*
+* @example
+* <Button onPress={() => console.log('Hi!')} icon={myIcon} />
+*
+* <Button onPress={() => console.log('Hi!')} icon={myIcon}>My button</Button>
+*/
+var Button = (props) => {
+	const { children, icon, size = "default", type = "default", flat, 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 component = jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+		onPress,
+		isDisabled: disabled,
+		isPending: pending,
+		className: cva([
+			"es:font-variation-[\"wdth\"_82,\"wght\"_325,\"ROND\"_100,\"GRAD\"_0] es:hover:font-variation-[\"wdth\"_82,\"wght\"_325,\"ROND\"_100,\"GRAD\"_70]",
+			"es:flex es:items-center es:justify-center",
+			"es:transition-plus es:duration-300 es:ease-spring-smooth es:text-13",
+			"es:any-focus:outline-hidden",
+			"es:focus-visible:ring-2",
+			"es:text-box-trim",
+			"es:leading-none",
+			"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",
+			"es:icon:size-5",
+			pending && "es:cursor-wait",
+			className
+		], {
+			variants: { size: {
+				small: "es:gap-0.75 es:rounded-lg es:hover:rounded-10! es:pressed:rounded-xl!",
+				default: "es:gap-1.25 es:rounded-10 es:hover:rounded-xl! es:pressed:rounded-14!",
+				large: "es:gap-1.5 es:rounded-xl es:hover:rounded-2xl! es:pressed:rounded-18!"
+			} },
+			compoundVariants: [
+				{
+					type: "default",
+					disabled: false,
+					class: [
+						"es:text-black",
+						!pending && "es:bg-linear-to-b es:from-black/2 es:to-black/4 es:from-25% es:bg-white",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-400/0 es:via-accent-400/25 es:to-accent-400/0 es:from-35% es:via-50% es:to-65% es:bg-surface-100",
+						"es:inset-ring",
+						pending ? "es:inset-ring-accent-600/20" : "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: "simple",
+					disabled: false,
+					class: [
+						"es:text-black",
+						!pending && "es:bg-secondary-50 es:bg-radial-[at_50%_5%] es:from-50% es:from-surface-500/6 es:to-surface-500/12",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-400/0 es:via-accent-400/25 es:to-accent-400/0 es:from-35% es:via-50% es:to-65% es:bg-surface-100",
+						"es:hover:bg-surface-100 es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10 es:hover:from-accent-600/4 es:hover:to-accent-600/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: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: "selectedSimple",
+					disabled: false,
+					class: [
+						"es:text-accent-600",
+						!pending && "es:bg-surface-50 es:bg-radial-[at_50%_5%] es:from-50% es:from-accent-900/2 es:to-accent-900/5",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-400/5 es:via-accent-400/25 es:to-accent-400/5 es:from-35% es:via-50% es:to-65% es:bg-surface-100",
+						"es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10 es:hover:from-accent-600/4 es:hover:to-accent-600/10",
+						" es:pressed:text-accent-950 es:pressed:from-accent-700/10 es:pressed:to-accent-700/20",
+						"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: "dangerSimple",
+					disabled: false,
+					class: [
+						"es:text-red-600",
+						!pending && "es:bg-white es:bg-radial-[at_50%_5%] es:from-50% es:from-secondary-500/8 es:to-secondary-500/14",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-red-500/0 es:via-red-500/30 es:to-red-500/0 es:from-35% es:via-50% es:to-65% es:bg-red-50",
+						"es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10 es:hover:from-red-600/4 es:hover:to-red-600/10",
+						" es:pressed:text-red-700 es:pressed:from-red-600/5 es:pressed:to-red-600/15",
+						"es:focus-visible:inset-ring es:focus-visible:ring-red-500/30 es:focus-visible:text-red-700 es:focus-visible:inset-ring-red-700 es:focus-visible:inset-shadow-red-300/10 es:focus-visible:bg-red-50"
+					]
+				},
+				{
+					disabled: false,
+					type: ["selected", "danger"],
+					class: ["es:font-variation-[\"wdth\"_85,\"wght\"_325,\"ROND\"_100,\"GRAD\"_50] es:hover:font-variation-[\"wdth\"_85,\"wght\"_325,\"ROND\"_100,\"GRAD\"_100]", "es:any-icon:drop-shadow-xs es:any-icon:drop-shadow-accent-800/25"]
+				},
+				{
+					type: "selected",
+					disabled: false,
+					class: [
+						"es:text-white es:text-shadow-xs es:text-shadow-accent-900/30",
+						!pending && "es:bg-linear-to-b es:from-accent-800/10 es:to-accent-800/30 es:bg-accent-500 es:from-30%",
+						pending && "es:bg-accent-600 es:shimmer-animation es:bg-linear-to-r es:from-accent-50/0 es:via-accent-50/35 es:to-accent-50/0 es:from-35% es:via-50% es:to-65%",
+						"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"
+					]
+				},
+				{
+					type: "danger",
+					disabled: false,
+					class: [
+						"es:text-white es:text-shadow-xs es:text-shadow-red-900/30",
+						!pending && "es:bg-linear-to-b es:from-red-800/10 es:to-red-800/30 es:bg-red-500 es:from-30%",
+						pending && "es:bg-red-600 es:shimmer-animation es:bg-linear-to-r es:from-red-50/0 es:via-red-50/35 es:to-red-50/0 es:from-35% es:via-50% es:to-65%",
+						"es:inset-ring es:inset-ring-red-700",
+						"es:inset-shadow-sm es:inset-shadow-red-50/25",
+						!flat && "es:shadow-xs es:shadow-red-900/30",
+						"es:hover:from-red-800/20 es:hover:to-red-800/40",
+						"es:pressed:from-red-800/30 es:pressed:to-red-800/50",
+						"es:focus-visible:ring-red-500/30 es:focus-visible:inset-ring-red-900 es:focus-visible:bg-red-600"
+					]
+				},
+				{
+					type: "ghost",
+					disabled: false,
+					class: [
+						!pending && "es:bg-linear-to-br es:from-surface-200/0 es:to-surface-200/0 es:text-secondary-700",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-600/0 es:via-accent-600/15 es:to-accent-600/0 es:from-35% es:via-50% es:to-65% es:bg-surface-50 es:inset-ring es:inset-ring-accent-600/5 es:text-accent-900",
+						"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: "dangerGhost",
+					disabled: false,
+					class: [
+						!pending && "es:bg-linear-to-br es:from-surface-200/0 es:to-surface-200/0 es:text-red-700",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-red-600/0 es:via-red-600/10 es:to-red-600/0 es:from-35% es:via-50% es:to-65% es:bg-secondary-50 es:inset-ring es:inset-ring-red-600/10 es:text-red-700",
+						"es:hover:from-red-500/4 es:hover:to-red-500/7 ",
+						"es:pressed:from-red-500/10 es:pressed:to-red-500/15 es:pressed:text-red-700",
+						"es:focus-visible:bg-red-50 es:focus-visible:text-red-950 es:focus-visible:inset-ring es:focus-visible:ring-red-500/30 es:focus-visible:inset-shadow-red-300/10 es:focus-visible:inset-ring-red-500"
+					]
+				},
+				{
+					type: "selectedGhost",
+					disabled: false,
+					class: [
+						!pending && "es:bg-linear-to-br es:from-surface-200/0 es:to-surface-200/0 es:text-accent-600",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-600/0 es:via-accent-600/15 es:to-accent-600/0 es:from-35% es:via-50% es:to-65% es:bg-surface-50 es:inset-ring es:inset-ring-accent-600/15 es:text-accent-700",
+						"es:hover:from-accent-500/5 es:hover:to-accent-500/15 ",
+						"es:pressed:from-accent-500/10 es:pressed:to-accent-500/20 es:pressed:text-accent-700",
+						"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: [
+						"glass",
+						"glassDark",
+						"dangerGlass",
+						"selectedGlass"
+					],
+					disabled: false,
+					class: "es:overflow-clip es:backdrop-blur-md"
+				},
+				{
+					type: "glass",
+					disabled: false,
+					class: [
+						"es:backdrop-saturate-120 es:backdrop-brightness-120 es:backdrop-contrast-95",
+						!pending && "es:bg-radial-[at_50%_75%] es:from-white/25 es:to-white/0",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-500/0 es:via-accent-500/20 es:to-accent-500/0 es:from-35% es:via-50% es:to-65% es:text-accent-700 es:bg-white/15",
+						"es:hover:from-white/35 es:hover:to-white/15",
+						"es:text-white",
+						"es:inset-shadow-sm es:inset-shadow-white/40",
+						!flat && "es:shadow-black/15 es:shadow-xs",
+						"es:inset-ring es:inset-ring-white/5",
+						"es:text-shadow-xs es:text-shadow-black/15",
+						"es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-700/50 es:focus-visible:bg-accent-300/30"
+					]
+				},
+				{
+					type: "glassDark",
+					disabled: false,
+					class: [
+						"es:backdrop-saturate-115 es:backdrop-brightness-75 es:backdrop-contrast-95",
+						!pending && "es:bg-radial-[at_50%_75%] es:from-black/40 es:to-black/20",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-50/0 es:via-accent-50/20 es:to-accent-50/0 es:from-35% es:via-50% es:to-65% es:bg-accent-950/10",
+						"es:hover:from-black/50 es:hover:to-black/35",
+						"es:text-white",
+						"es:inset-shadow-sm es:inset-shadow-white/20",
+						!flat && "es:shadow-xs es:shadow-black/15",
+						"es:inset-ring es:inset-ring-black/20",
+						"es:text-shadow-xs es:text-shadow-black/15 es:focus-visible:text-shadow-accent-950/15",
+						"es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-700/50 es:focus-visible:bg-accent-300/30"
+					]
+				},
+				{
+					type: "dangerGlass",
+					disabled: false,
+					class: [
+						"es:backdrop-saturate-125 es:backdrop-brightness-75 es:backdrop-contrast-95",
+						!pending && "es:bg-radial-[at_50%_75%] es:from-red-500/30 es:to-red-500/10 es:bg-red-600/25",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-red-400/0 es:via-red-500/35 es:to-red-400/5 es:from-35% es:via-50% es:to-65% es:bg-red-700/25",
+						"es:hover:from-red-400/30 es:hover:to-red-400/25",
+						"es:text-red-50",
+						"es:inset-shadow-sm es:inset-shadow-red-300/40",
+						!flat && "es:shadow-xs es:shadow-black/15",
+						"es:inset-ring es:inset-ring-red-200/5",
+						"es:text-shadow-xs es:text-shadow-red-950/15",
+						"es:focus-visible:ring-red-500/30 es:focus-visible:inset-ring-red-700/50 es:focus-visible:bg-red-700/30"
+					]
+				},
+				{
+					type: "selectedGlass",
+					disabled: false,
+					class: [
+						"es:backdrop-saturate-120 es:backdrop-brightness-120 es:backdrop-contrast-95",
+						!pending && "es:bg-radial-[at_50%_75%] es:from-accent-500/30 es:to-accent-500/5 es:bg-accent-600/10",
+						pending && "es:shimmer-animation es:-bg-linear-75 es:from-accent-400/0 es:via-accent-400/50 es:to-accent-400/0 es:from-35% es:via-50% es:to-65% es:bg-accent-700/25",
+						"es:hover:from-accent-400/30 es:hover:to-accent-400/25",
+						"es:text-accent-50/95",
+						"es:inset-shadow-sm es:inset-shadow-accent-200/40",
+						!flat && "es:shadow-xs es:shadow-black/15",
+						"es:inset-ring es:inset-ring-accent-200/5",
+						"es:text-shadow-xs es:text-shadow-accent-950/15",
+						"es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-700/50 es:focus-visible:bg-accent-600/30"
+					]
+				},
+				{
+					type: [
+						"default",
+						"selected",
+						"danger"
+					],
+					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: [
+						"simple",
+						"selectedSimple",
+						"dangerSimple"
+					],
+					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-100"
+					]
+				},
+				{
+					type: [
+						"ghost",
+						"dangerGhost",
+						"selectedGhost"
+					],
+					disabled: true,
+					class: ["es:text-secondary-500 es:any-icon:text-secondary-500/50"]
+				},
+				{
+					type: [
+						"glass",
+						"glassDark",
+						"dangerGlass",
+						"selectedGlass"
+					],
+					disabled: true,
+					class: [
+						"es:backdrop-blur-md es:backdrop-brightness-105 es:backdrop-contrast-30 es:backdrop-saturate-25",
+						"es:text-secondary-300 es:any-icon:text-secondary-300/50",
+						"es:inset-ring es:inset-ring-black/5"
+					]
+				},
+				{
+					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: { disabled: false }
+		})({
+			disabled: !pending && disabled,
+			hasIcon: Boolean(icon),
+			iconOnly: Boolean(icon && !children),
+			size,
+			type
+		}),
+		ref: objRef,
+		"aria-label": ariaLabel,
+		...other,
+		children: ({ isPending }) => jsxs(Fragment$1, { children: [
+			icon,
+			children,
+			isPending && jsx($0393f8ab869a0f1a$export$c17561cb55d4db30, {
+				"aria-label": pendingAriaLabel,
+				className: "es:sr-only",
+				isIndeterminate: true
+			})
+		] })
+	});
+	if (!tooltip) return component;
+	return 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>
+*/
+var ButtonGroup = ({ children, className, vertical, hidden, type = "segmented", ...rest }) => {
+	if (hidden) return null;
+	return jsx($13c3c67164f4d5be$export$4c260019440d418f, {
+		className: clsx("es:flex", type === "segmented" && !vertical && "es:gap-0.5", type === "segmented" && vertical && "es:flex-col es:gap-0.75", type === "segmented" && !vertical && "es-button-group-h", type === "segmented" && vertical && "es-button-group-v", type === "split" && !vertical && "es:gap-1.25", type === "split" && vertical && "es:flex-col es:gap-1", className),
+		orientation: vertical ? "vertical" : "horizontal",
+		...rest,
+		children
+	});
+};
+//#endregion
+export { ButtonGroup as n, Button as t };