@eightshift/ui-components 6.3.0 → 7.1.0

package/dist/textSelection-Dv6WPj0Z.js

@@ -0,0 +1,45 @@
+import { E as $bbed8b41f857bcc0$export$24490316f764c430, L as $c87311424ea30a05$export$fedb369cb70207f1, W as $431fbd86ca7dc216$export$b204af158042fbac } from "./useHover-qaMm3XFO.js";
+//#region node_modules/@react-aria/interactions/dist/textSelection.mjs
+var $14c0b72509d70225$var$state = "default";
+var $14c0b72509d70225$var$savedUserSelect = "";
+var $14c0b72509d70225$var$modifiedElementMap = new WeakMap();
+function $14c0b72509d70225$export$16a4697467175487(target) {
+	if ($c87311424ea30a05$export$fedb369cb70207f1()) {
+		if ($14c0b72509d70225$var$state === "default") {
+			const documentObject = $431fbd86ca7dc216$export$b204af158042fbac(target);
+			$14c0b72509d70225$var$savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+			documentObject.documentElement.style.webkitUserSelect = "none";
+		}
+		$14c0b72509d70225$var$state = "disabled";
+	} else if (target instanceof HTMLElement || target instanceof SVGElement) {
+		let property = "userSelect" in target.style ? "userSelect" : "webkitUserSelect";
+		$14c0b72509d70225$var$modifiedElementMap.set(target, target.style[property]);
+		target.style[property] = "none";
+	}
+}
+function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
+	if ($c87311424ea30a05$export$fedb369cb70207f1()) {
+		if ($14c0b72509d70225$var$state !== "disabled") return;
+		$14c0b72509d70225$var$state = "restoring";
+		setTimeout(() => {
+			$bbed8b41f857bcc0$export$24490316f764c430(() => {
+				if ($14c0b72509d70225$var$state === "restoring") {
+					const documentObject = $431fbd86ca7dc216$export$b204af158042fbac(target);
+					if (documentObject.documentElement.style.webkitUserSelect === "none") documentObject.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || "";
+					$14c0b72509d70225$var$savedUserSelect = "";
+					$14c0b72509d70225$var$state = "default";
+				}
+			});
+		}, 300);
+	} else if (target instanceof HTMLElement || target instanceof SVGElement) {
+		if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
+			let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
+			let property = "userSelect" in target.style ? "userSelect" : "webkitUserSelect";
+			if (target.style[property] === "none") target.style[property] = targetOldUserSelect;
+			if (target.getAttribute("style") === "") target.removeAttribute("style");
+			$14c0b72509d70225$var$modifiedElementMap.delete(target);
+		}
+	}
+}
+//#endregion
+export { $14c0b72509d70225$export$b0d6fa1ab32e3295 as n, $14c0b72509d70225$export$16a4697467175487 as t };

package/dist/toggle-button-DJ8jNQ-9.js

@@ -0,0 +1,424 @@
+import { t as clsx } from "./clsx-BUU5J41u.js";
+import { f as $ff5963eb1fccf552$export$e08e3b67e392101e, 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 { t as $6179b936705e76d3$export$ae780daf29e6d456 } from "./useHover-qaMm3XFO.js";
+import { t as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-_2_3GD-K.js";
+import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-DuYL4cdO.js";
+import { n as Tooltip } from "./tooltip-BzJzYlcc.js";
+import { t as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "./useButton-ra1ZSZ4z.js";
+import { t as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-IIDbiKPl.js";
+import { t as $1d5b8b8664671ef2$export$c9549807523555e0 } from "./SelectionIndicator-31L6EI9F.js";
+import { t as cva } from "./dist-DIK9pFxO.js";
+import React, { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region node_modules/@react-aria/button/dist/useToggleButton.mjs
+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 })
+	};
+}
+//#endregion
+//#region node_modules/@react-aria/button/dist/useToggleButtonGroup.mjs
+function $4547d1bf40011fdf$export$bc53712daae3d6e6(props, state, ref) {
+	let toggleState = {
+		isSelected: state.selectedKeys.has(props.id),
+		defaultSelected: false,
+		setSelected(isSelected) {
+			state.setSelected(props.id, isSelected);
+		},
+		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
+	};
+}
+//#endregion
+//#region node_modules/react-aria-components/dist/ToggleButtonGroup.mjs
+var $84b7d8702d4ff4a8$export$a8a71863db173133 = createContext(null);
+//#endregion
+//#region node_modules/react-aria-components/dist/ToggleButton.mjs
+var $efde0372d7a700fe$export$43506d75ebd2e218 = createContext({});
+var $efde0372d7a700fe$export$d2b052e7b4be1756 = 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(isSelected) {
+			groupState.setSelected(props.id, isSelected);
+		}
+	} : 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,
+		isDisabled
+	});
+	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 React.createElement($64fa3d84918910a7$export$df3a06d6289f983e.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
+	}, React.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, { value: { isSelected } }, renderProps.children));
+});
+//#endregion
+//#region lib/components/toggle-button/toggle-button.jsx
+var componentClasses = cva([
+	"es:font-variation-[\"wdth\"_85,\"wght\"_325,\"ROND\"_100,\"GRAD\"_0,\"slnt\"_0] es:not-aria-pressed:hover:font-variation-[\"wdth\"_85,\"wght\"_325,\"ROND\"_100,\"GRAD\"_75,\"slnt\"_0] es:aria-pressed:font-variation-[\"wdth\"_85,\"wght\"_325,\"ROND\"_100,\"GRAD\"_75,\"slnt\"_-2]",
+	"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:shrink-0",
+	"es:text-box-trim",
+	"es:leading-none",
+	"es:icon:size-5"
+], {
+	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"
+		] },
+		flat: {
+			true: null,
+			false: null
+		}
+	},
+	compoundVariants: [
+		{
+			size: "small",
+			selected: true,
+			class: "es:rounded-xl"
+		},
+		{
+			size: "default",
+			selected: true,
+			class: "es:rounded-14"
+		},
+		{
+			size: "large",
+			selected: true,
+			class: "es:rounded-18"
+		},
+		{
+			size: "small",
+			selected: false,
+			class: "es:rounded-lg es:hover:rounded-10! es:pressed:rounded-xl!"
+		},
+		{
+			size: "default",
+			selected: false,
+			class: "es:rounded-10 es:hover:rounded-xl! es:pressed:rounded-14!"
+		},
+		{
+			size: "large",
+			selected: false,
+			class: "es:rounded-xl es:hover:rounded-2xl! es:pressed:rounded-18!"
+		},
+		{
+			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",
+				"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: false,
+			flat: false,
+			class: "es:shadow-xs es:shadow-black/5"
+		},
+		{
+			type: "default",
+			disabled: false,
+			selected: true,
+			class: [
+				"es:font-variation-[\"wdth\"_80,\"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",
+				"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: "default",
+			disabled: false,
+			selected: true,
+			flat: false,
+			class: "es:shadow-xs es:shadow-accent-900/30"
+		},
+		{
+			type: "simple",
+			disabled: false,
+			selected: false,
+			class: [
+				"es:text-black",
+				"es:bg-radial-[at_50%_5%] es:from-50% es:from-surface-500/6 es:to-surface-500/12",
+				"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: "simple",
+			disabled: false,
+			selected: true,
+			class: [
+				"es:text-white",
+				"es:bg-radial-[at_50%_5%] es:from-50% es:from-accent-600/75 es:to-accent-600 es:text-white es:text-shadow-xs es:text-shadow-black/15",
+				"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"
+			]
+		},
+		{
+			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/10",
+				"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"]
+		},
+		{
+			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,
+		flat: false
+	}
+});
+/**
+* @typedef {import('../tooltip/tooltip').TooltipProps} TooltipProps
+* */
+/**
+* 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={myIcon}
+* 	/>
+*
+* <ToggleButton
+* 		selected={selected}
+* 		onChange={setSelected}
+* 		icon={myIcon}
+* >
+* 		My button
+* </ToggleButton>
+*/
+var ToggleButton = (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;
+	let tooltip = rawTooltip;
+	if (rawTooltip === true && ariaLabel?.length > 0) tooltip = ariaLabel;
+	const component = jsxs($efde0372d7a700fe$export$d2b052e7b4be1756, {
+		isSelected: selected,
+		onChange,
+		isDisabled: disabled,
+		className: clsx(componentClasses({
+			disabled,
+			selected,
+			hasIcon: Boolean(icon),
+			iconOnly: Boolean(icon) && Boolean(!children),
+			flat: Boolean(flat),
+			size,
+			type
+		}), className),
+		...other,
+		children: [icon, children]
+	});
+	if (!tooltip) return component;
+	return jsx(Tooltip, {
+		text: tooltip,
+		wrapperClassName,
+		...tooltipProps,
+		children: component
+	});
+};
+//#endregion
+export { ToggleButton as t };