@eightshift/ui-components 5.0.0 → 5.0.2

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -0,0 +1,161 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { upperFirst } from "../../utilities/es-dash.js";
+/**
+ * Component that renders a preview of the breakpoints to help users visualize the options they set.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object[]} [props.blocks] - Blocks to display.
+ * @param {string} [props.blocks[].width] - Current breakpoint width. Left-aligned with the block.
+ * @param {string} [props.blocks[].widthEnd] - Current breakpoint width. Right-aligned with the block.
+ * @param {string} [props.blocks[].breakpoint] - Breakpoint name.
+ * @param {string} [props.blocks[].value] - Current value at the breakpoint.
+ * @param {boolean} [props.blocks[].dotsStart=false] - If `true`, dots are displayed at the start of the block.
+ * @param {boolean} [props.blocks[].dotsEnd=false] - If `true`, dots are displayed at the end of the block.
+ * @param {boolean} [props.blocks[].active=false] - If `true`, the block is active.
+ * @param {boolean} [props.blocks[].alignEnd=false] - If `true`, the block is aligned to the end.
+ * @param {BreakpointColor} [props.blocks[].color] - Color of the block.
+ * @param {boolean} [props.dotsStart=false] - If `true`, dots are displayed at the start of the preview.
+ * @param {boolean} [props.dotsEnd=false] - If `true`, dots are displayed at the end of the preview.
+ *  *
+ * @returns {JSX.Element} The BreakpointPreview component.
+ *
+ * @typedef {'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'orange' | 'cyan' | 'teal' | 'fuchsia' | 'black' | 'default'} BreakpointColor
+ *
+ * @example
+ * <BreakpointPreview
+ * 		blocks={[
+ * 			{
+ * 				breakpoint: 'Mobile',
+ * 				widthEnd: '480px',
+ * 				value: 'Regular',
+ * 				dotsStart: true,
+ * 				alignEnd: true,
+ * 				active: true,
+ * 			},
+ * 			{
+ * 				breakpoint: 'Default',
+ * 				value: 'Small',
+ * 				dotsEnd: true,
+ * 			},
+ * 		]}
+ * />
+ *
+ * @preserve
+ */
+const BreakpointPreview = (props) => {
+  const { blocks: rawBlocks, dotsStart = false, dotsEnd = false } = props;
+  const blocks = rawBlocks.filter(Boolean);
+  if (!blocks || blocks.length < 1) {
+    return null;
+  }
+  const hasActive = (blocks == null ? void 0 : blocks.some(({ active }) => active)) ?? false;
+  const activeColors = {
+    blue: {
+      text: "es:text-blue-500",
+      bg: "es:bg-blue-500"
+    },
+    green: {
+      text: "es:text-lime-500",
+      bg: "es:bg-lime-500"
+    },
+    yellow: {
+      text: "es:text-yellow-400",
+      bg: "es:bg-yellow-400"
+    },
+    red: {
+      text: "es:text-red-500",
+      bg: "es:bg-red-500"
+    },
+    indigo: {
+      text: "es:text-indigo-500",
+      bg: "es:bg-indigo-500"
+    },
+    orange: {
+      text: "es:text-orange-500",
+      bg: "es:bg-orange-500"
+    },
+    cyan: {
+      text: "es:text-cyan-500",
+      bg: "es:bg-cyan-500"
+    },
+    teal: {
+      text: "es:text-accent-500",
+      bg: "es:bg-accent-500"
+    },
+    fuchsia: {
+      text: "es:text-fuchsia-500",
+      bg: "es:bg-fuchsia-500"
+    },
+    black: {
+      text: "es:text-black",
+      bg: "es:bg-black"
+    },
+    default: {
+      text: "es:text-secondary-600",
+      bg: "es:bg-secondary-600"
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:mx-auto es:grid es:w-fit es:shrink-0 es:auto-cols-auto es:grid-rows-[auto_auto] es:gap-x-2 es:gap-y-0.5"), children: [
+    dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:translate-x-1 es:items-center es:gap-1 es:justify-self-end es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px es:justify-self-end" })
+    ] }),
+    blocks.map(({ width, widthEnd, breakpoint, value, dotsStart: dotsStart2 = false, dotsEnd: dotsEnd2 = false, active = false, alignEnd = false, color }, i) => {
+      var _a, _b;
+      const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
+      const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
+      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: [
+          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"), children: [
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+          ] }),
+          width && /* @__PURE__ */ jsx("span", { children: width }),
+          /* @__PURE__ */ jsx("div", { className: clsx("es:grow es:rounded", active ? "es:h-0.5" : "es:h-px es:bg-secondary-300", active && activeBgColor) }),
+          widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
+          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "es:text-secondary-300"), children: [
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "es:row-start-2 es:flex es:w-full es:min-w-28 es:flex-col es:items-start es:gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                "es:rounded es:px-1 es:py-0.5",
+                hasActive && active && "es:text-white",
+                hasActive && active && activeBgColor,
+                hasActive && !active && "es:bg-secondary-200 es:text-secondary-500",
+                !hasActive && "es:bg-secondary-600 es:text-white",
+                alignEnd && "es:ml-auto"
+              ),
+              children: upperFirst(breakpoint)
+            }
+          ),
+          value && /* @__PURE__ */ jsx("span", { className: clsx("es:-mt-0.5 es:px-1", active ? "es:text-secondary-400" : "es:text-secondary-400", alignEnd && "es:ml-auto"), children: value })
+        ] })
+      ] }, i);
+    }),
+    dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:-translate-x-1 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px" })
+    ] })
+  ] });
+};
+export {
+  BreakpointPreview
+};

package/dist/components/button/button.js

@@ -0,0 +1,387 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BpwTmkAe.js";
+import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-CZt7LCbO.js";
+import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-BEPI2m7u.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import React__default, { useState, useRef, forwardRef, createContext } from "react";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as cva } from "../../index-BljRBEr_.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.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);
+  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);
+});
+/**
+ * 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|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`.
+ * @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.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Button component.
+ *
+ * @typedef {'small' | 'default' | 'large'} ButtonSize
+ * @typedef {'default' | 'selected' | 'ghost' | 'danger' | 'dangerGhost'} 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) => {
+  const {
+    children,
+    icon,
+    size = "default",
+    type = "default",
+    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 == null ? void 0 : 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:not-disabled:cursor-pointer",
+      "es:shrink-0",
+      icon && children ? "es:justify-start" : "es:justify-center",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: "es:icon:size-4.5 es:rounded-md",
+          default: "es:icon:size-5.5 es:rounded-lg",
+          large: "es:icon:size-6 es:rounded-lg"
+        },
+        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:not-disabled:hover:bg-secondary-100 es:disabled:border-transparent!",
+          dangerGhost: [
+            "es:border-transparent es:text-red-600",
+            "es:not-disabled:hover:bg-red-500/5",
+            "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!"
+          ]
+        }
+      },
+      compoundVariants: [
+        // Styles.
+        {
+          type: "default",
+          disabled: false,
+          class: [
+            "es:text-black",
+            "es:from-secondary-50 es:to-white",
+            "es:border-secondary-300",
+            "es:inset-ring-secondary-100",
+            "es:inset-shadow-secondary-100/50",
+            "es:shadow-xs",
+            "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"
+          ]
+        },
+        {
+          type: "danger",
+          disabled: false,
+          class: [
+            "es:text-red-800",
+            "es:from-red-50/75 es:to-white",
+            "es:border-red-600/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"
+          ]
+        },
+        {
+          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__ */ jsxs(
+    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+    {
+      onPress,
+      isDisabled: disabled,
+      className: componentClasses({
+        disabled,
+        hasIcon: Boolean(icon),
+        iconOnly: Boolean(icon && !children),
+        size,
+        type
+      }),
+      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.
+ * @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
+};