welcome-ui/dist/Button.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as r } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { Box as l } from "./Box.mjs";
import { Loader as f } from "./Loader.mjs";
import { shouldForwardProp as p, forwardRef as y } from "./System.mjs";
import { B as w } from "./X5NMLKT6-Ctro4-UX.mjs";
import x, { th as t, system as g, css as n } from "@xstyled/styled-components";
import { h as j } from "./hide-focus-rings-root-Dcm160m2.mjs";
const B = (s, i = "square") => n`
  width: ${t(`buttons.sizes.${s}.height`)};
  padding: 0;
  ${i === "circle" && n`
    border-radius: ${t(`buttons.sizes.${s}.height`)};
  `};
`, c = x(w).withConfig({ shouldForwardProp: p })(
  ({ ai: s, danger: i, disabled: u, shape: $, size: e = "md", variant: o = "primary" }) => n`
    ${t(`buttons.${o}`)};
    ${s && n`
      ${t(`buttons.ai.${o}`)};
    `}
    ${i && n`
      ${t(`buttons.danger.${o}`)};
    `}
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    ${t(`buttons.sizes.${e}`)};
    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;
    ${$ && B(e, $)};
    ${g};

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

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

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

    ${!u && n`
      [${j}] &:focus {
        box-shadow: none;
      }
      &:focus {
        ${t(`buttons.focus.${o}`)};
        ${s && n`
          ${t(`buttons.focus.ai.${o}`)};
        `}
        ${i && n`
          ${t(`buttons.focus.danger.${o}`)};
        `}
      }
      &:hover {
        ${t(`buttons.hover.${o}`)};
        ${s && n`
          ${t(`buttons.hover.ai.${o}`)};
        `}
        ${i && n`
          ${t(`buttons.hover.danger.${o}`)};
        `}
      }
      &:active {
        ${t(`buttons.active.${o}`)};
        ${s && n`
          ${t(`buttons.active.ai.${o}`)};
        `}
        ${i && n`
          ${t(`buttons.active.danger.${o}`)};
        `}
      }
    `};

    &[disabled] {
      cursor: not-allowed;
    }
  `
), R = y(
  ({
    ai: s,
    children: i,
    danger: u,
    dataTestId: $,
    disabled: e,
    isLoading: o,
    size: h = "md",
    variant: a = "primary",
    ...b
  }, m) => {
    const d = e || o;
    return /* @__PURE__ */ r.jsxs(
      c,
      {
        ai: s,
        danger: u,
        "data-loading": o,
        "data-testid": $,
        disabled: d,
        ref: m,
        size: h,
        variant: d ? "disabled" : a,
        ...b,
        children: [
          o ? /* @__PURE__ */ r.jsxs("div", { children: [
            /* @__PURE__ */ r.jsx(
              l,
              {
                alignItems: "center",
                bottom: 0,
                display: "flex",
                justifyContent: "center",
                left: 0,
                m: 0,
                position: "absolute",
                right: 0,
                top: 0,
                children: /* @__PURE__ */ r.jsx(f, { size: "xs" })
              }
            ),
            /* @__PURE__ */ r.jsx(l, { opacity: "0", children: i })
          ] }) : null,
          !o && i
        ]
      }
    );
  }
);
R.displayName = "Button";
const E = c;
export {
  R as Button,
  E as StyledButton
};