@welcome-ui/button/dist/index.mjs

welcome-ui: A button component

"use client"

// src/index.tsx
import React from "react";
import { forwardRef } from "@welcome-ui/system";
import { Box } from "@welcome-ui/box";
import { Loader } from "@welcome-ui/loader";

// src/styles.ts
import styled, { css, system, th } from "@xstyled/styled-components";
import { Button as AriakitButton } from "@ariakit/react";
import { shouldForwardProp } from "@welcome-ui/system";
import { hideFocusRingsDataAttribute } from "@welcome-ui/utils";
var shapeStyles = (size, shape = "square") => css`
  width: ${th(`buttons.sizes.${size}.height`)};
  padding: 0;
  ${shape === "circle" && css`
    border-radius: ${th(`buttons.sizes.${size}.height`)};
  `};
`;
var Button = styled(AriakitButton).withConfig({ shouldForwardProp })(
  ({ danger, disabled, shape, size = "md", variant = "primary" }) => css`
    ${th(`buttons.${variant}`)};
    ${danger && css`
      ${th(`buttons.danger.${variant}`)};
    `}
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    ${th(`buttons.sizes.${size}`)};
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    outline: none !important; /* important for firefox */
    border-width: sm;
    border-style: solid;
    appearance: none;
    overflow: hidden;
    transition: medium;
    ${shape && shapeStyles(size, shape)};
    ${system};

    & > svg.wui-icon,
    & > i.wui-icon-font {
      font-weight: initial;

      &:only-child {
        width: ${th(`buttons.icon.only.${size}`)};
        height: ${th(`buttons.icon.only.${size}`)};
        font-size: ${th(`buttons.icon.only.${size}`)};
      }
      &:not(:only-child) {
        width: ${th(`buttons.icon.default.${size}`)};
        height: ${th(`buttons.icon.default.${size}`)};
        font-size: ${th(`buttons.icon.default.${size}`)};
      }
    }

    & > *:not(:only-child):not(:last-child) {
      margin-right: sm;
    }

    ${!disabled && css`
      [
${hideFocusRingsDataAttribute}] &:focus {
        box-shadow: none;
      }
      &:focus {
        ${th(`buttons.focus.${variant}`)};
        ${danger && css`
          ${th(`buttons.focus.danger.${variant}`)};
        `}
      }
      &:hover {
        ${th(`buttons.hover.${variant}`)};
        ${danger && css`
          ${th(`buttons.hover.danger.${variant}`)};
        `}
      }
      &:active {
        ${th(`buttons.active.${variant}`)};
        ${danger && css`
          ${th(`buttons.active.danger.${variant}`)};
        `}
      }
    `};

    &[disabled] {
      cursor: not-allowed;
    }
  `
);

// src/index.tsx
var Button2 = forwardRef(
  ({
    children,
    danger,
    dataTestId,
    disabled,
    isLoading,
    size = "md",
    variant = "primary",
    ...rest
  }, ref) => {
    const isDisabled = disabled || isLoading;
    return /* @__PURE__ */ React.createElement(
      Button,
      {
        danger,
        "data-loading": isLoading,
        "data-testid": dataTestId,
        disabled: isDisabled,
        ref,
        size,
        variant: isDisabled ? "disabled" : variant,
        ...rest
      },
      isLoading && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
        Box,
        {
          alignItems: "center",
          bottom: 0,
          display: "flex",
          justifyContent: "center",
          left: 0,
          m: 0,
          position: "absolute",
          right: 0,
          top: 0
        },
        /* @__PURE__ */ React.createElement(Loader, { size: "xs" })
      ), /* @__PURE__ */ React.createElement(Box, { opacity: "0" }, children)),
      !isLoading && children
    );
  }
);
Button2.displayName = "Button";
var StyledButton = Button;
export {
  Button2 as Button,
  StyledButton
};