@teamsparta/stack-button/dist/chunk-4QD46C5S.mjs

stack button

"use client";

import {
  adjustTouchableCss,
  buttonBaseCss,
  buttonIconSizeCss,
  buttonRadiusCss,
  buttonRoundedCss,
  buttonSizeCss,
  disabledCss,
  iconButtonVariants
} from "./chunk-5O7ZDSYD.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/IconButton/IconButton.tsx
import { mapResponsive, useBreakpointContext } from "@teamsparta/stack-core";
import { getVar } from "@teamsparta/stack-utils";
import {
  cloneElement,
  forwardRef,
  isValidElement
} from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var IconButton = forwardRef(
  function _IconButton(_a, ref) {
    var _b = _a, {
      variant = "solid",
      colorScheme = "primary",
      size: sizeFromProps = "md",
      radius = "square",
      style: styleFromProps,
      disabled = false,
      children
    } = _b, restProps = __objRest(_b, [
      "variant",
      "colorScheme",
      "size",
      "radius",
      "style",
      "disabled",
      "children"
    ]);
    var _a2, _b2, _c;
    const breakpoints = useBreakpointContext("IconButton");
    const sizes = mapResponsive(
      breakpoints,
      sizeFromProps,
      (breakpoint, size) => ({
        breakpoint,
        size
      })
    );
    const style = __spreadValues(__spreadValues({}, iconButtonVariants[`${variant}-${colorScheme}`]), styleFromProps);
    const buttonContainerCss = [
      buttonBaseCss,
      buttonSizeCss(sizes),
      radius === "rounded" ? buttonRoundedCss : buttonRadiusCss(sizes),
      disabled && disabledCss,
      buttonIconSizeCss(sizes)
    ];
    const enhancedIcon = isValidElement(children) ? cloneElement(children, __spreadProps(__spreadValues({}, (_a2 = children.props) != null ? _a2 : {}), {
      color: (_c = (_b2 = children.props) == null ? void 0 : _b2.color) != null ? _c : getVar("--stack-button-text-color")
    })) : children;
    return /* @__PURE__ */ jsxs(
      "button",
      __spreadProps(__spreadValues({
        ref,
        style,
        css: buttonContainerCss,
        disabled
      }, restProps), {
        children: [
          enhancedIcon,
          /* @__PURE__ */ jsx("span", { css: adjustTouchableCss })
        ]
      })
    );
  }
);

export {
  IconButton
};