react-reusable-button-diludilshad
Version:
A modern, customizable React button component with multiple variants, sizes, and states. Perfect for building consistent UI across your React applications.
400 lines (399 loc) • 12.6 kB
JavaScript
import re from "react";
var y = { exports: {} }, w = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var U;
function te() {
if (U) return w;
U = 1;
var l = Symbol.for("react.transitional.element"), v = Symbol.for("react.fragment");
function f(u, o, s) {
var d = null;
if (s !== void 0 && (d = "" + s), o.key !== void 0 && (d = "" + o.key), "key" in o) {
s = {};
for (var m in o)
m !== "key" && (s[m] = o[m]);
} else s = o;
return o = s.ref, {
$$typeof: l,
type: u,
key: d,
ref: o !== void 0 ? o : null,
props: s
};
}
return w.Fragment = v, w.jsx = f, w.jsxs = f, w;
}
var R = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var q;
function ae() {
return q || (q = 1, process.env.NODE_ENV !== "production" && function() {
function l(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === Q ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case p:
return "Fragment";
case A:
return "Profiler";
case O:
return "StrictMode";
case B:
return "Suspense";
case X:
return "SuspenseList";
case Z:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case j:
return "Portal";
case V:
return (e.displayName || "Context") + ".Provider";
case J:
return (e._context.displayName || "Context") + ".Consumer";
case G:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case H:
return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
case D:
r = e._payload, e = e._init;
try {
return l(e(r));
} catch {
}
}
return null;
}
function v(e) {
return "" + e;
}
function f(e) {
try {
v(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
a
), v(e);
}
}
function u(e) {
if (e === p) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === D)
return "<...>";
try {
var r = l(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function o() {
var e = S.A;
return e === null ? null : e.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function d(e) {
if (I.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function m(e, r) {
function t() {
$ || ($ = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function h() {
var e = l(this.type);
return F[e] || (F[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function T(e, r, t, a, c, i, N, C) {
return t = i.ref, e = {
$$typeof: k,
type: e,
key: r,
props: i,
_owner: c
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: h
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: N
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: C
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function x(e, r, t, a, c, i, N, C) {
var n = r.children;
if (n !== void 0)
if (a)
if (K(n)) {
for (a = 0; a < n.length; a++)
_(n[a]);
Object.freeze && Object.freeze(n);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else _(n);
if (I.call(r, "key")) {
n = l(e);
var E = Object.keys(r).filter(function(ee) {
return ee !== "key";
});
a = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", M[n + a] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
a,
n,
E,
n
), M[n + a] = !0);
}
if (n = null, t !== void 0 && (f(t), n = "" + t), d(r) && (f(r.key), n = "" + r.key), "key" in r) {
t = {};
for (var Y in r)
Y !== "key" && (t[Y] = r[Y]);
} else t = r;
return n && m(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), T(
e,
n,
i,
c,
o(),
t,
N,
C
);
}
function _(e) {
typeof e == "object" && e !== null && e.$$typeof === k && e._store && (e._store.validated = 1);
}
var g = re, k = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), V = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), Z = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), S = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, K = Array.isArray, P = console.createTask ? console.createTask : function() {
return null;
};
g = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var $, F = {}, W = g["react-stack-bottom-frame"].bind(
g,
s
)(), L = P(u(s)), M = {};
R.Fragment = p, R.jsx = function(e, r, t, a, c) {
var i = 1e4 > S.recentlyCreatedOwnerStacks++;
return x(
e,
r,
t,
!1,
a,
c,
i ? Error("react-stack-top-frame") : W,
i ? P(u(e)) : L
);
}, R.jsxs = function(e, r, t, a, c) {
var i = 1e4 > S.recentlyCreatedOwnerStacks++;
return x(
e,
r,
t,
!0,
a,
c,
i ? Error("react-stack-top-frame") : W,
i ? P(u(e)) : L
);
};
}()), R;
}
var z;
function ne() {
return z || (z = 1, process.env.NODE_ENV === "production" ? y.exports = te() : y.exports = ae()), y.exports;
}
var b = ne();
const se = ({
children: l,
variant: v = "primary",
size: f = "medium",
disabled: u = !1,
onClick: o,
type: s = "button",
className: d = "",
fullWidth: m = !1,
loading: h = !1,
...T
}) => {
const x = [
"inline-flex items-center justify-center gap-2",
"border-none rounded-md font-medium",
"text-decoration-none cursor-pointer",
"transition-all duration-200 ease-in-out",
"relative overflow-hidden select-none outline-none",
"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-60",
"active:transform active:translate-y-0",
"hover:transform hover:-translate-y-0.5"
], _ = {
small: "px-3 py-1.5 text-sm min-h-8",
medium: "px-4 py-2 text-base min-h-10",
large: "px-6 py-3 text-lg min-h-12"
}, g = {
primary: [
"bg-blue-500 text-white",
"hover:bg-blue-600 hover:shadow-lg hover:shadow-blue-500/30",
"active:shadow-md active:shadow-blue-500/30"
],
secondary: [
"bg-gray-100 text-gray-700 border border-gray-300",
"hover:bg-gray-200 hover:border-gray-400 hover:shadow-lg hover:shadow-gray-500/10",
"active:shadow-md active:shadow-gray-500/10",
"dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600",
"dark:hover:bg-gray-600 dark:hover:border-gray-500"
],
outline: [
"bg-transparent text-blue-500 border-2 border-blue-500",
"hover:bg-blue-500 hover:text-white hover:shadow-lg hover:shadow-blue-500/30",
"active:shadow-md active:shadow-blue-500/30"
],
ghost: [
"bg-transparent text-blue-500",
"hover:bg-blue-500/10 hover:-translate-y-0.5"
],
danger: [
"bg-red-500 text-white",
"hover:bg-red-600 hover:shadow-lg hover:shadow-red-500/30",
"active:shadow-md active:shadow-red-500/30"
],
success: [
"bg-green-500 text-white",
"hover:bg-green-600 hover:shadow-lg hover:shadow-green-500/30",
"active:shadow-md active:shadow-green-500/30"
]
}, k = m ? "w-full" : "", j = h ? "cursor-wait" : "", p = [
...x,
_[f],
...g[v],
k,
j,
d
].filter(Boolean).join(" "), O = (A) => {
!u && !h && o && o(A);
};
return /* @__PURE__ */ b.jsxs(
"button",
{
type: s,
className: p,
disabled: u || h,
onClick: O,
...T,
children: [
h && /* @__PURE__ */ b.jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ b.jsx("svg", { className: "animate-spin w-4 h-4", viewBox: "0 0 24 24", children: /* @__PURE__ */ b.jsxs(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2",
fill: "none",
strokeDasharray: "31.416",
strokeDashoffset: "31.416",
children: [
/* @__PURE__ */ b.jsx(
"animate",
{
attributeName: "stroke-dasharray",
dur: "2s",
values: "0 31.416;15.708 15.708;0 31.416",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ b.jsx(
"animate",
{
attributeName: "stroke-dashoffset",
dur: "2s",
values: "0;-15.708;-31.416",
repeatCount: "indefinite"
}
)
]
}
) }) }),
/* @__PURE__ */ b.jsx("span", { className: "flex items-center justify-center gap-inherit", children: l })
]
}
);
};
export {
se as Button
};