@crossed/ui/lib/commonjs/buttons/IconButton.js

A universal & performant styling library for React Native, Next.js & React

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var IconButton_exports = {};
__export(IconButton_exports, {
  IconButton: () => IconButton,
  iconButtonStyles: () => iconButtonStyles
});
module.exports = __toCommonJS(IconButton_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react_native = require("react-native");
var import_styled = require("@crossed/styled");
var import_react = require("react");
const iconButtonStyles = (0, import_styled.inlineStyle)(({ components: { Action } }) => ({
  "base": {
    borderRadius: 50,
    backgroundColor: Action.icon.default.background,
    borderColor: Action.icon.default.border,
    height: 40,
    width: 40,
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1
  },
  ":hover": {
    backgroundColor: Action.icon.hover.background,
    borderColor: Action.icon.hover.border
  },
  ":active": {
    backgroundColor: Action.icon.active.background,
    borderColor: Action.icon.active.border,
    outlineColor: Action.icon.focus.border
  },
  ":disabled": { opacity: 0.5 },
  "web": {
    ":focus-visible": {
      backgroundColor: Action.icon.focus.background,
      outlineColor: Action.icon.focus.border
    }
  }
}));
const IconButton = (0, import_react.memo)(
  ({ children, style, ...props }) => {
    const { components } = (0, import_styled.useTheme)();
    const getStyle = (0, import_react.useCallback)(
      ({
        hovered,
        pressed,
        focused
      }) => {
        return (0, import_styled.composeStyles)(iconButtonStyles, style).style({
          hover: hovered,
          focus: focused,
          active: pressed,
          disabled: !!props.disabled
        }).style;
      },
      [props.disabled, import_styled.Registry.themeName, style]
    );
    const child = (0, import_react.useCallback)(
      (e) => {
        const tmpChild = typeof children === "function" ? children(e) : children;
        if ((0, import_react.isValidElement)(tmpChild)) {
          return (0, import_react.cloneElement)(tmpChild, {
            size: 16,
            color: components.Action.icon.default.color
          });
        }
        return tmpChild;
      },
      [children]
    );
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { role: "button", ...props, style: getStyle, children: child });
  }
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  IconButton,
  iconButtonStyles
});
//# sourceMappingURL=IconButton.js.map