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

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

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { composeStyles } from "@crossed/styled";
import { ActivityIndicator, Pressable } from "react-native";
import { forwardRef, useId, useState } from "react";
import {
  buttonErrorStyles,
  buttonPrimaryStyles,
  buttonSecondaryStyles,
  buttonSizeStyles,
  buttonSuccessStyles,
  buttonTertiaryStyles
} from "./styles";
import { ButtonIcon } from "./Icon";
import { buttonContext } from "./context";
import { alignSelfStyle } from "../../styles/alignItems";
const Button = forwardRef(
  ({
    variant = "primary",
    disabled,
    loading,
    size = "md",
    children,
    alignSelf,
    ...props
  }, ref) => {
    const renderLoading = loading ? /* @__PURE__ */ jsx(ButtonIcon, { children: /* @__PURE__ */ jsx(ActivityIndicator, {}) }) : null;
    const id = useId();
    const [textId, setTextId] = useState(id);
    return /* @__PURE__ */ jsx(
      Pressable,
      {
        "aria-disabled": Boolean(disabled ?? false),
        "aria-labelledby": textId,
        role: "button",
        tabIndex: disabled ? -1 : 0,
        disabled: disabled || loading,
        ref,
        ...props,
        style: (e) => composeStyles(
          buttonSizeStyles.default,
          size && buttonSizeStyles[size],
          alignSelf && alignSelfStyle[alignSelf],
          variant === "primary" && buttonPrimaryStyles.root,
          variant === "secondary" && buttonSecondaryStyles.root,
          variant === "tertiary" && buttonTertiaryStyles.root,
          variant === "error" && buttonErrorStyles.root,
          variant === "success" && buttonSuccessStyles.root,
          props.style
        ).rnw({
          hover: e.hovered,
          active: e.pressed,
          disabled: disabled || loading
        }).style,
        children: (e) => {
          return /* @__PURE__ */ jsxs(
            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";
export {
  Button
};
//# sourceMappingURL=Button.js.map