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

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

import { jsx } from "react/jsx-runtime";
import { Pressable } from "react-native";
import {
  composeStyles,
  inlineStyle,
  useTheme,
  Registry
} from "@crossed/styled";
import { cloneElement, isValidElement, memo, useCallback } from "react";
const iconButtonStyles = 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 = memo(
  ({ children, style, ...props }) => {
    const { components } = useTheme();
    const getStyle = useCallback(
      ({
        hovered,
        pressed,
        focused
      }) => {
        return composeStyles(iconButtonStyles, style).style({
          hover: hovered,
          focus: focused,
          active: pressed,
          disabled: !!props.disabled
        }).style;
      },
      [props.disabled, Registry.themeName, style]
    );
    const child = useCallback(
      (e) => {
        const tmpChild = typeof children === "function" ? children(e) : children;
        if (isValidElement(tmpChild)) {
          return cloneElement(tmpChild, {
            size: 16,
            color: components.Action.icon.default.color
          });
        }
        return tmpChild;
      },
      [children]
    );
    return /* @__PURE__ */ jsx(Pressable, { role: "button", ...props, style: getStyle, children: child });
  }
);
export {
  IconButton,
  iconButtonStyles
};
//# sourceMappingURL=IconButton.js.map