react-action-button
Version:
A customizable button component for React with support for various styles, sizes, and social media icons. Includes built-in loading state and easy integration with Tailwind CSS. Perfect for use in forms, actions, and social login buttons with configurable
233 lines (230 loc) • 10.9 kB
JavaScript
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/index.tsx
var index_exports = {};
__export(index_exports, {
ActionButton: () => ActionButton,
ButtonSizes: () => ButtonSizes,
ButtonTypes: () => ButtonTypes,
ButtonVariants: () => ButtonVariants,
SocialVariants: () => SocialVariants,
cn: () => cn
});
module.exports = __toCommonJS(index_exports);
// src/ActionButton.tsx
var import_react = __toESM(require("react"));
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
var import_jsx_runtime = require("react/jsx-runtime");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
var ButtonVariants = /* @__PURE__ */ ((ButtonVariants2) => {
ButtonVariants2["none"] = "none";
ButtonVariants2["default"] = "default";
ButtonVariants2["primary"] = "primary";
ButtonVariants2["secondary"] = "secondary";
ButtonVariants2["danger"] = "danger";
ButtonVariants2["accent"] = "accent";
ButtonVariants2["ghost"] = "ghost";
ButtonVariants2["link"] = "link";
return ButtonVariants2;
})(ButtonVariants || {});
var ButtonTypes = /* @__PURE__ */ ((ButtonTypes2) => {
ButtonTypes2["button"] = "button";
ButtonTypes2["submit"] = "submit";
ButtonTypes2["reset"] = "reset";
return ButtonTypes2;
})(ButtonTypes || {});
var SocialVariants = /* @__PURE__ */ ((SocialVariants2) => {
SocialVariants2["none"] = "none";
SocialVariants2["facebook"] = "facebook";
SocialVariants2["instagram"] = "instagram";
SocialVariants2["google"] = "google";
SocialVariants2["linkedin"] = "linkedin";
SocialVariants2["twitter"] = "twitter";
SocialVariants2["github"] = "github";
return SocialVariants2;
})(SocialVariants || {});
var ButtonStyles = {
none: "",
default: "bg-gray-200 text-black hover:bg-gray-300",
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:secondary/80",
danger: "bg-destructive hover:destructive/90 text-destructive-foreground",
accent: "bg-accent text-accent-foreground hover:accent/80",
ghost: "bg-transparent hover:bg-gray-200 border border-gray-300",
link: "text-primary underline hover:text-primary/80"
};
var OutlineButtonStyles = {
none: "",
default: "border border-gray-400 hover:bg-gray-100",
primary: "border border-primary hover:primary/90",
secondary: "border border-secondary hover:bg-secondary/80",
danger: "border border-destructive hover:destructive/90",
accent: "border border-accent hover:bg-accent/80",
ghost: "border border-gray-300 hover:bg-gray-100",
link: "text-primary underline hover:text-primary/80"
// Link stays the same
};
var IconSizeMapping = {
small: "w-4 h-4",
medium: "w-5 h-5",
large: "w-6 h-6"
};
var IconMapping = {
none: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
facebook: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: IconSizeMapping.small,
viewBox: "0 0 320 512",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M279.14 288l14.22-92.66h-88.91V132.89c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S273.4 0 236.36 0c-73.19 0-121.06 44.38-121.06 124.72V195H32v92.66h83.3V512h100.18V288z" })
}
),
twitter: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: IconSizeMapping.small,
viewBox: "0 0 512 512",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.974-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.299 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.97 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.783-51.005-46.783-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.919-2.599-24.041 0-57.828 46.782-104.934 104.934-104.934 30.214 0 57.502 12.67 76.67 33.137 23.715-4.548 46.132-13.32 66.158-25.34-7.798 24.366-24.366 44.832-46.132 57.828 21.117-2.274 41.909-8.122 60.1-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" })
}
),
instagram: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: IconSizeMapping.small,
viewBox: "0 0 448 512",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M224 141c-63.6 0-115 51.4-115 115s51.4 115 115 115 115-51.4 115-115-51.4-115-115-115zm0 190c-41.4 0-75-33.6-75-75s33.6-75 75-75 75 33.6 75 75-33.6 75-75 75zm146-194c0 14.2-11.5 25.7-25.7 25.7s-25.7-11.5-25.7-25.7 11.5-25.7 25.7-25.7 25.7 11.5 25.7 25.7zM224 73c-75.1 0-136 60.9-136 136s60.9 136 136 136 136-60.9 136-136S299.1 73 224 73zm0 242c-58.7 0-106-47.3-106-106s47.3-106 106-106 106 47.3 106 106-47.3 106-106 106zm146-226c0 16.6-13.4 30-30 30s-30-13.4-30-30 13.4-30 30-30 30 13.4 30 30z" })
}
),
linkedin: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: IconSizeMapping.small,
viewBox: "0 0 448 512",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.7 0 53.79 0 23.88 24.09 0 53.79 0s53.79 24.09 53.79 53.79c0 29.91-24.09 54.31-53.79 54.31zm394.2 339.9h-92.88V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.8-55.7 76.9v148h-92.88V148.9h89.2v40.8h1.3c12.4-23.4 42.7-48.3 88-48.3 94.1 0 111.4 61.9 111.4 142.3V448z" })
}
),
github: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
className: IconSizeMapping.small,
viewBox: "0 0 480 512",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.8 0-6.1-3.2-6.1-7.1 0-4 2.3-7.2 6.1-7.2 3 0 5.2 2 5.2 4.5v6.2zm-3.2 13.3c0 1.6-2.1 3.2-4.5 3.2-2.3 0-4.5-1.6-4.5-3.2 0-1.7 2.2-3.3 4.5-3.3 2.4 0 4.5 1.6 4.5 3.3zM244 8C111 8 8 113 8 246.2c0 106.4 68.4 196.5 163.3 228.6 11.9 2.2 16.3-5.2 16.3-11.6 0-5.8-.2-21.3-.3-41.8-66.3 14.6-80.3-31.8-80.3-31.8-10.8-28-26.5-35.5-26.5-35.5-21.6-14.9 1.6-14.6 1.6-14.6 23.8 1.7 36.3 24.6 36.3 24.6 21.3 36.4 55.9 25.9 69.5 19.8 2.1-15.4 8.3-25.8 15.2-31.8-53-5.9-108.7-26.5-108.7-118 0-26.1 9.3-47.4 24.6-64.1-2.5-6-10.6-30.3 2.4-63 0 0 20-6.5 65.5 24.5 19-5.3 39.3-8 59.6-8 20.3 0 40.6 2.7 59.6 8 45.5-31 65.5-24.5 65.5-24.5 13 32.7 4.9 57 2.4 63 15.3 16.7 24.6 38 24.6 64.1 0 91.8-55.7 112-108.8 118 8.5 7.3 16 21.7 16 43.8 0 31.6-.3 57-.3 64.6 0 6.5 4.4 13.9 16.4 11.6 94.8-32.1 163.1-122.2 163.1-228.6C480 113 377 8 244 8z" })
}
)
};
var SocialButtonStyles = {
none: "",
facebook: "bg-blue-600 hover:bg-blue-700 text-white",
twitter: "bg-blue-400 hover:bg-blue-500 text-white",
instagram: "bg-pink-500 hover:bg-pink-600 text-white",
linkedin: "bg-blue-700 hover:bg-blue-800 text-white",
github: "bg-gray-800 hover:bg-gray-900 text-white",
google: "bg-blue-600 hover:bg-blue-700 text-white"
};
var OutLineSocialButtonStyles = {
none: "",
facebook: "border border-blue-600 hover:border-blue-700 text-blue-600",
twitter: "border border-blue-400 hover:border-blue-500 text-blue-400",
instagram: "border border-pink-500 hover:border-pink-600 text-pink-500",
linkedin: "border border-blue-700 hover:border-blue-800 text-blue-700",
github: "border border-gray-800 hover:border-gray-900 text-gray-800",
google: "border border-blue-600 hover:border-blue-700 text-blue-600"
};
var ButtonSizes = /* @__PURE__ */ ((ButtonSizes2) => {
ButtonSizes2["small"] = "small";
ButtonSizes2["medium"] = "medium";
ButtonSizes2["large"] = "large";
return ButtonSizes2;
})(ButtonSizes || {});
var SizeStyles = {
small: "px-2 py-1 text-sm",
medium: "px-4 py-2 text-base",
large: "px-6 py-3 text-lg"
};
function ActionButton({
children,
className,
platform = "none" /* none */,
variant = "none" /* none */,
outline = false,
loading = false,
type = "button" /* button */,
size = "medium" /* medium */,
loadingText = "Loading...",
loadingIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `spinner-border animate-spin ${IconSizeMapping[size]} border-2 border-t-2 border-white rounded-full`
}
),
onClick
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
onClick,
disabled: loading,
type,
className: cn(
"flex items-center justify-center gap-2 whitespace-nowrap rounded-md",
outline ? OutLineSocialButtonStyles[platform] : SocialButtonStyles[platform],
outline ? OutlineButtonStyles[variant] : ButtonStyles[variant],
SizeStyles[size],
className
),
children: [
loading ? loadingIcon : platform !== "none" /* none */ && import_react.default.cloneElement(IconMapping[platform], {
className: IconSizeMapping[size]
}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: loading ? loadingText : children })
]
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ActionButton,
ButtonSizes,
ButtonTypes,
ButtonVariants,
SocialVariants,
cn
});