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.
23 lines (22 loc) • 8.84 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const re=require("react");var T={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 b in o)b!=="key"&&(s[b]=o[b])}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 S:return"Profiler";case O:return"StrictMode";case G: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 B: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=A.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 b(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 k(e,r,t,a,c,i,N,C){return t=i.ref,e={$$typeof:y,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 _(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++)x(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 x(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}",L[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),L[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&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,n,i,c,o(),t,N,C)}function x(e){typeof e=="object"&&e!==null&&e.$$typeof===y&&e._store&&(e._store.validated=1)}var g=re,y=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),V=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),G=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"),A=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={},M=g["react-stack-bottom-frame"].bind(g,s)(),W=P(u(s)),L={};R.Fragment=p,R.jsx=function(e,r,t,a,c){var i=1e4>A.recentlyCreatedOwnerStacks++;return _(e,r,t,!1,a,c,i?Error("react-stack-top-frame"):M,i?P(u(e)):W)},R.jsxs=function(e,r,t,a,c){var i=1e4>A.recentlyCreatedOwnerStacks++;return _(e,r,t,!0,a,c,i?Error("react-stack-top-frame"):M,i?P(u(e)):W)}}()),R}var z;function ne(){return z||(z=1,process.env.NODE_ENV==="production"?T.exports=te():T.exports=ae()),T.exports}var m=ne();const oe=({children:l,variant:v="primary",size:f="medium",disabled:u=!1,onClick:o,type:s="button",className:d="",fullWidth:b=!1,loading:h=!1,...k})=>{const _=["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"],x={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"]},y=b?"w-full":"",j=h?"cursor-wait":"",p=[..._,x[f],...g[v],y,j,d].filter(Boolean).join(" "),O=S=>{!u&&!h&&o&&o(S)};return m.jsxs("button",{type:s,className:p,disabled:u||h,onClick:O,...k,children:[h&&m.jsx("span",{className:"flex items-center justify-center",children:m.jsx("svg",{className:"animate-spin w-4 h-4",viewBox:"0 0 24 24",children:m.jsxs("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2",fill:"none",strokeDasharray:"31.416",strokeDashoffset:"31.416",children:[m.jsx("animate",{attributeName:"stroke-dasharray",dur:"2s",values:"0 31.416;15.708 15.708;0 31.416",repeatCount:"indefinite"}),m.jsx("animate",{attributeName:"stroke-dashoffset",dur:"2s",values:"0;-15.708;-31.416",repeatCount:"indefinite"})]})})}),m.jsx("span",{className:"flex items-center justify-center gap-inherit",children:l})]})};exports.Button=oe;