@teamsparta/stack-button/dist/chunk-U6AEKBUN.mjs

stack button

"use client";

import {
  addonCss,
  adjustTouchableCss,
  buttonBaseCss,
  buttonChildrenCss,
  buttonIconSizeCss,
  buttonRadiusCss,
  buttonRoundedCss,
  buttonSizeCss,
  buttonTextCss,
  buttonVariants,
  buttonWidthCss,
  disabledCss,
  loadingContainerCss,
  spinnerContainerCss,
  textColorVar
} from "./chunk-BXHYNIUD.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/Button/Button.tsx
import {
  mapResponsive,
  mapResponsiveValue,
  useBreakpointContext
} from "@teamsparta/stack-core";
import { Spinner } from "@teamsparta/stack-spinner";
import { getVar } from "@teamsparta/stack-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var RESPONSIVE_SPINNER_SIZE_MAP = {
  xl: "lg",
  lg: "lg",
  md: "md",
  sm: "sm",
  xs: "sm"
};
var Button = forwardRef(
  function _Button(_a, ref) {
    var _b = _a, {
      variant = "solid",
      colorScheme = "primary",
      size: sizeFromProps = "md",
      radius = "square",
      children,
      style: styleFromProps,
      loading = false,
      disabled = false,
      leftAddon,
      rightAddon,
      fullWidth = false
    } = _b, restProps = __objRest(_b, [
      "variant",
      "colorScheme",
      "size",
      "radius",
      "children",
      "style",
      "loading",
      "disabled",
      "leftAddon",
      "rightAddon",
      "fullWidth"
    ]);
    const breakpoints = useBreakpointContext("Button");
    const sizes = mapResponsive(
      breakpoints,
      sizeFromProps,
      (breakpoint, size) => ({
        breakpoint,
        size
      })
    );
    const fullWidths = mapResponsive(
      breakpoints,
      fullWidth,
      (breakpoint, value) => ({
        breakpoint,
        value
      })
    );
    const style = __spreadValues(__spreadValues({}, buttonVariants[`${variant}-${colorScheme}`]), styleFromProps);
    const buttonContainerCss = [
      buttonBaseCss,
      buttonSizeCss(sizes),
      radius === "rounded" ? buttonRoundedCss : buttonRadiusCss(sizes),
      disabled && disabledCss,
      loading && loadingContainerCss,
      buttonWidthCss(fullWidths)
    ];
    const buttonAddonCss = [addonCss, buttonIconSizeCss(sizes)];
    const buttonTextContainerCss = [buttonTextCss(sizes), buttonChildrenCss];
    const buttonLoadingContainerCss = [spinnerContainerCss];
    const spinnerSize = mapResponsiveValue(
      sizeFromProps,
      RESPONSIVE_SPINNER_SIZE_MAP
    );
    return /* @__PURE__ */ jsxs(
      "button",
      __spreadProps(__spreadValues({
        ref,
        style,
        css: buttonContainerCss,
        disabled: disabled || loading
      }, restProps), {
        children: [
          leftAddon && /* @__PURE__ */ jsx("span", { css: buttonAddonCss, "data-loading": loading, children: leftAddon }),
          /* @__PURE__ */ jsx("span", { css: buttonTextContainerCss, "data-loading": loading, children }),
          loading && /* @__PURE__ */ jsx("span", { css: buttonLoadingContainerCss, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: getVar(textColorVar) }) }),
          rightAddon && /* @__PURE__ */ jsx("span", { css: buttonAddonCss, "data-loading": loading, children: rightAddon }),
          /* @__PURE__ */ jsx("span", { css: adjustTouchableCss })
        ]
      })
    );
  }
);

export {
  Button
};