@eightshift/ui-components 0.0.1

package/dist/button-BkkdyHfJ.js

@@ -0,0 +1,307 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { b as $64fa3d84918910a7$export$86427a43e3e48ebb, a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, l as $df56164dff5785e2$export$4338b53315abf666 } from "./utils-BsiH7-5Y.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-DG2RfOUr.js";
+import React__default, { createContext, useState, useRef, forwardRef } from "react";
+import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "./useButton-CuG5UzUw.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-Cc-4eouh.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./focusSafely-C3K8zAKj.js";
+import { b as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./FocusScope-1u9yyfIN.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-jMy6xdVq.js";
+import { classnames } from "./utilities/classnames.js";
+import { T as Tooltip } from "./tooltip-CkCndvTI.js";
+import { _ as __ } from "./default-i18n-BhE-OUmt.js";
+const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = /* @__PURE__ */ new Set([
+  "form",
+  "formAction",
+  "formEncType",
+  "formMethod",
+  "formNoValidate",
+  "formTarget",
+  "name",
+  "value"
+]);
+const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /* @__PURE__ */ createContext({});
+function $d2b4bc8c273e7be6$var$Button(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
+  let ctx = props;
+  let { buttonProps, isPressed } = $701a24aa0da5b062$export$ea18c227d4417cc3(props, ref);
+  let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isHovered,
+      isPressed,
+      isFocused,
+      isFocusVisible,
+      isDisabled: props.isDisabled || false
+    },
+    defaultClassName: "react-aria-Button"
+  });
+  return /* @__PURE__ */ React__default.createElement("button", {
+    ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+      propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
+    }),
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(buttonProps, focusProps, hoverProps),
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-pressed": ctx.isPressed || isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0
+  });
+}
+const $d2b4bc8c273e7be6$export$353f5b6fc5456de1 = /* @__PURE__ */ $64fa3d84918910a7$export$86427a43e3e48ebb($d2b4bc8c273e7be6$var$Button);
+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: {
+      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({});
+function $13c3c67164f4d5be$var$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);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(toolbarProps, DOMProps),
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-orientation": props.orientation || "horizontal"
+  }, renderProps.children);
+}
+const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13c3c67164f4d5be$var$Toolbar);
+/**
+ * A simple button component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the button.
+ * @param {ButtonSize} [props.size='default'] - The size of the button.
+ * @param {ButtonType} [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} [props.tooltip] - Tooltip text to display on hover.
+ * @param {Function} [props.onPress] - Function to run when the button is pressed.
+ * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
+ * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
+ * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
+ *
+ * @returns {JSX.Element} The Button component.
+ *
+ * @typedef {'small' | 'default' | 'large'} ButtonSize
+ * @typedef {'default' | 'selected' | 'ghost' | 'danger'} ButtonType
+ *
+ * @example
+ * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
+ *
+ * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon}>My button</Button>
+ *
+ * @preserve
+ */
+const Button = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    children,
+    icon,
+    size = "default",
+    type = "default",
+    disabled,
+    className,
+    tooltip,
+    onPress,
+    forwardedRef,
+    wrapperClassName,
+    tooltipProps,
+    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components"),
+    ...other
+  } = props;
+  const objRef = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
+  const sizes = {
+    small: {
+      iconButton: "es-uic-size-7",
+      button: "es-uic-h-7 es-uic-min-w-7",
+      iconButtonPadding: "es-uic-px-1",
+      buttonPadding: "es-uic-px-2",
+      iconSize: "[&>svg]:es-uic-size-4"
+    },
+    default: {
+      iconButton: "es-uic-size-9",
+      button: "es-uic-h-9 es-uic-min-w-9",
+      iconButtonPadding: "es-uic-px-1.5",
+      buttonPadding: "es-uic-px-2",
+      iconSize: "[&>svg]:es-uic-size-5.5"
+    },
+    large: {
+      iconButton: "es-uic-size-10",
+      button: "es-uic-h-10 es-uic-min-w-10",
+      iconButtonPadding: "es-uic-px-2",
+      buttonPadding: "es-uic-px-4",
+      iconSize: "[&>svg]:es-uic-size-6"
+    }
+  };
+  const themes = {
+    default: {
+      regular: "es-uic-text-gray-700 es-uic-shadow-sm es-uic-border es-uic-border-gray-300 es-uic-bg-white",
+      hover: "hover:es-uic-border-gray-300 hover:es-uic-bg-gray-100",
+      disabled: "disabled:es-uic-border-gray-300 disabled:es-uic-bg-gray-50/50 disabled:es-uic-text-gray-300 es-uic-border",
+      focus: "focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
+    },
+    selected: {
+      regular: "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-45 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
+      hover: "hover:es-uic-shadow-teal-600/50 hover:after:es-uic-opacity-60"
+    },
+    ghost: {
+      regular: "es-uic-border-transparent es-uic-text-gray-700",
+      hover: "hover:es-uic-bg-gray-100",
+      disabled: "disabled:es-uic-text-gray-300 disabled:es-uic-border-transparent"
+    },
+    danger: {
+      regular: "es-uic-border-red-300 es-uic-text-gray-700 es-uic-text-gray-900 es-uic-shadow-red-300/30 [&>svg]:es-uic-text-red-500 es-uic-shadow-sm es-uic-border",
+      hover: "hover:es-uic-border-red-400 hover:es-uic-bg-red-50 hover:es-uic-text-red-500 hover:es-uic-shadow-red-300/75",
+      focus: "focus-visible:es-uic-ring-red-500 focus-visible:es-uic-ring-opacity-50"
+    }
+  };
+  const component = /* @__PURE__ */ jsxs(
+    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+    {
+      onPress,
+      isDisabled: disabled,
+      className: classnames(
+        "es-uic-flex es-uic-items-center es-uic-gap-1 es-uic-rounded-md es-uic-transition es-uic-duration-300",
+        icon && !children && "es-uic-justify-center",
+        !disabled && (((_a = themes[type]) == null ? void 0 : _a.regular) ?? themes.default.regular),
+        !disabled && (((_b = themes[type]) == null ? void 0 : _b.hover) ?? themes.default.hover),
+        "disabled:es-uic-shadow-none",
+        disabled && (((_c = themes[type]) == null ? void 0 : _c.disabled) ?? themes.default.disabled),
+        "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring",
+        ((_d = themes[type]) == null ? void 0 : _d.focus) ?? themes.default.focus,
+        icon && !children && sizes[size].iconButton,
+        children && "es-uic-text-sm",
+        children && sizes[size].button,
+        children && icon && sizes[size].iconButtonPadding,
+        children && !icon && sizes[size].buttonPadding,
+        "[.es-uic-button-group_&:not(:first-child)]:es-uic-rounded-l-none [.es-uic-button-group_&:not(:last-child)]:-es-uic-mr-px [.es-uic-button-group_&:not(:last-child)]:es-uic-rounded-r-none",
+        "[.es-uic-button-group_div:not(:first-child)_>_&]:es-uic-rounded-l-none [.es-uic-button-group_div:not(:last-child)_>_&]:-es-uic-mr-px [.es-uic-button-group_div:not(:last-child)_>_&]:es-uic-rounded-r-none",
+        sizes[size].iconSize,
+        type === "selected" && 'es-uic-relative es-uic-isolate after:es-uic-absolute after:es-uic-inset-0 after:-es-uic-z-10 after:es-uic-rounded-[0.3125rem] after:es-uic-bg-gradient-to-br after:es-uic-from-teal-100/40 after:es-uic-via-transparent after:es-uic-to-teal-200/50 after:es-uic-opacity-0 after:es-uic-transition-opacity after:es-uic-content-[""]',
+        type === "selected" && "[.es-uic-button-group_&:not(:first-child)]:after:es-uic-rounded-l-none [.es-uic-button-group_&:not(:last-child)]:after:es-uic-rounded-r-none",
+        type === "selected" && "[.es-uic-button-group_div:not(:first-child)_>_&]:after:es-uic-rounded-l-none [.es-uic-button-group_div:not(:last-child)_>_&]:after:es-uic-rounded-r-none",
+        className
+      ),
+      ref: objRef,
+      "aria-label": ariaLabel,
+      ...other,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+  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.
+ *
+ * @returns {JSX.Element} The ButtonGroup component.
+ *
+ * @example
+ * <ButtonGroup>
+ * 	<Button ... />
+ * 	<Button ... />
+ * 	<Button ... />
+ * </ButtonGroup>
+ *
+ * @preserve
+ */
+const ButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx($13c3c67164f4d5be$export$4c260019440d418f, { className: classnames("es-uic-button-group es-uic-flex", className), children });
+export {
+  $d2b4bc8c273e7be6$export$24d547caef80ccd1 as $,
+  Button as B,
+  ButtonGroup as a,
+  $d2b4bc8c273e7be6$export$353f5b6fc5456de1 as b,
+  $13c3c67164f4d5be$export$4c260019440d418f as c
+};