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

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

"use client";
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 Button_exports = {};
__export(Button_exports, {
  Button: () => Button
});
module.exports = __toCommonJS(Button_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_styled = require("@crossed/styled");
var import_react_native = require("react-native");
var import_react = require("react");
var import_styles = require("./styles");
var import_Icon = require("./Icon");
var import_context = require("./context");
var import_alignItems = require("../../styles/alignItems");
const Button = (0, import_react.forwardRef)(
  ({
    variant = "primary",
    disabled,
    loading,
    size = "md",
    children,
    alignSelf,
    ...props
  }, ref) => {
    const renderLoading = loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.ButtonIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ActivityIndicator, {}) }) : null;
    const id = (0, import_react.useId)();
    const [textId, setTextId] = (0, import_react.useState)(id);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.Pressable,
      {
        "aria-disabled": Boolean(disabled ?? false),
        "aria-labelledby": textId,
        role: "button",
        tabIndex: disabled ? -1 : 0,
        disabled: disabled || loading,
        ref,
        ...props,
        style: (e) => (0, import_styled.composeStyles)(
          import_styles.buttonSizeStyles.default,
          size && import_styles.buttonSizeStyles[size],
          alignSelf && import_alignItems.alignSelfStyle[alignSelf],
          variant === "primary" && import_styles.buttonPrimaryStyles.root,
          variant === "secondary" && import_styles.buttonSecondaryStyles.root,
          variant === "tertiary" && import_styles.buttonTertiaryStyles.root,
          variant === "error" && import_styles.buttonErrorStyles.root,
          variant === "success" && import_styles.buttonSuccessStyles.root,
          props.style
        ).rnw({
          hover: e.hovered,
          active: e.pressed,
          disabled: disabled || loading
        }).style,
        children: (e) => {
          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
            import_context.buttonContext.Provider,
            {
              value: {
                variant,
                size,
                state: { active: e.pressed, hover: e.hovered },
                disabled: disabled || loading,
                textId,
                setTextId
              },
              children: [
                renderLoading,
                typeof children === "function" ? children(e) : children
              ]
            }
          );
        }
      }
    );
  }
);
Button.displayName = "Button";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Button
});
//# sourceMappingURL=Button.js.map