@fidely-ui/react/dist/components/icon-button/index.cjs

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client'
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/icon-button/index.ts
var icon_button_exports = {};
__export(icon_button_exports, {
  IconButton: () => IconButton
});
module.exports = __toCommonJS(icon_button_exports);

// src/components/icon-button/icon-button.tsx
var import_react2 = require("react");

// src/components/button/button.tsx
var React = __toESM(require("react"), 1);
var import_factory2 = require("@ark-ui/react/factory");
var import_jsx2 = require("@fidely-ui/styled-system/jsx");
var import_recipes2 = require("@fidely-ui/styled-system/recipes");

// src/utils/attr.ts
var dataAttr = (condition) => condition ? "" : void 0;

// src/components/spinner/spinner.tsx
var import_react = require("react");
var import_factory = require("@ark-ui/react/factory");
var import_jsx = require("@fidely-ui/styled-system/jsx");
var import_recipes = require("@fidely-ui/styled-system/recipes");
var import_jsx_runtime = require("react/jsx-runtime");
var StyledSpinner = (0, import_jsx.styled)(import_factory.ark.div, import_recipes.spinner);
var Spinner = (0, import_react.forwardRef)(
  function Spinner2(props, ref) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSpinner, { ref, ...props });
  }
);
Spinner.displayName = "Spinner";

// src/components/loader/index.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Loader = (props) => {
  const { spinner: spinner2, ...rest } = props;
  if (spinner2) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: spinner2 });
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Spinner,
    {
      width: "1.1em",
      height: "1.1em",
      borderWidth: "1.5px",
      "aria-hidden": "true",
      ...rest
    }
  );
};

// src/components/button/button.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var StyledButton = (0, import_jsx2.styled)(import_factory2.ark.button, import_recipes2.button);
var Button = React.forwardRef(
  function Button2(props, ref) {
    const {
      isLoading,
      loadingText,
      spinnerPlacement = "start",
      children,
      asChild,
      disabled,
      spinner: spinner2,
      ...rest
    } = props;
    const LoaderComp = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { spinner: spinner2 });
    const checkDisabled = isLoading || disabled;
    const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
      isLoading && spinnerPlacement === "start" && !loadingText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderComp, {}),
      isLoading && loadingText ? loadingText : children,
      isLoading && spinnerPlacement === "end" && !loadingText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderComp, {})
    ] });
    if (asChild) {
      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
        StyledButton,
        {
          asChild: true,
          ref,
          disabled: checkDisabled,
          "data-disabled": dataAttr(disabled),
          "data-loading": dataAttr(isLoading),
          ...rest,
          children
        }
      );
    }
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      StyledButton,
      {
        ref,
        disabled: checkDisabled,
        "data-disabled": dataAttr(disabled),
        "data-loading": dataAttr(isLoading),
        ...rest,
        children: buttonContent
      }
    );
  }
);
Button.displayName = "Button";

// src/components/icon-button/icon-button.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var IconButton = (0, import_react2.forwardRef)(
  function IconButton2(props, ref) {
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
      Button,
      {
        ref,
        px: "0",
        py: "0",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        _icon: { fontSize: "1.1em" },
        ...props
      }
    );
  }
);
IconButton.displayName = "IconButton";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  IconButton
});