@shakibdshy/react-button-pro/dist/index.js

A flexible and feature-rich button component for React

'use strict';var f=require('react'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),tailwindTheme=require('@shakibdshy/tailwind-theme');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var f__default=/*#__PURE__*/_interopDefault(f);function d(...s){return tailwindMerge.twMerge(classVarianceAuthority.cx(s))}var W=classVarianceAuthority.cva("inline-block animate-spin rounded-full align-middle",{variants:{color:{white:"border-background",primary:"border-primary",secondary:"border-secondary",info:"border-info",neutral:"border-neutral",error:"border-error",warning:"border-warning",success:"border-success"},variant:{spin:"animate-spin",pulse:"animate-pulse",ping:"animate-ping"},size:{sm:"size-4",md:"size-6",lg:"size-8",xl:"size-10","2xl":"size-12"}},compoundVariants:[{variant:"spin",color:"white",className:"border-b-2 border-background"},{variant:["pulse","ping"],color:"white",className:"border-b-2 bg-background"},{variant:"spin",color:"primary",className:"border-b-2 border-primary"},{variant:"spin",color:"secondary",className:"border-b-2 border-secondary"},{variant:"spin",color:"neutral",className:"border-b-2 border-neutral"},{variant:"spin",color:"info",className:"border-b-2 border-info"},{variant:"spin",color:"error",className:"border-b-2 border-error"},{variant:"spin",color:"warning",className:"border-b-2 border-warning"},{variant:"spin",color:"success",className:"border-b-2 border-success"},{variant:["pulse","ping"],color:"primary",className:"bg-primary"},{variant:["pulse","ping"],color:"secondary",className:"bg-secondary"},{variant:["pulse","ping"],color:"neutral",className:"bg-neutral"},{variant:["pulse","ping"],color:"info",className:"bg-info"},{variant:["pulse","ping"],color:"error",className:"bg-error"},{variant:["pulse","ping"],color:"warning",className:"bg-warning"},{variant:["pulse","ping"],color:"success",className:"bg-success"}],defaultVariants:{size:"md",color:"primary",variant:"spin"}}),$=classVarianceAuthority.cva("",{variants:{color:{white:"text-background",primary:"text-primary",secondary:"text-secondary",info:"text-info",neutral:"text-neutral",error:"text-error",warning:"text-warning",success:"text-success"}},defaultVariants:{color:"primary"}});function L(s){let{className:l="",label:a,isShowLabel:r,color:i,labelClassName:u="",custom:e}=s;return f__default.default.createElement("div",{"aria-label":a,className:"relative inline-flex flex-col gap-2 items-center justify-center"},e,!e&&f__default.default.createElement("div",{className:d(W({color:i,variant:s.variant,size:s.size}),l||""),role:"status"},!r&&f__default.default.createElement("span",{className:"sr-only"},a)),r&&f__default.default.createElement("span",{className:d("text-base font-medium",u||"",$({color:i}))},a))}function A(s){let{as:l="button",type:a="button",isLoading:r,className:i,spinner:u,isDisabled:e,color:o,spinnerColor:n,variant:p,size:c,rounded:m,children:v,hasRipple:b=!0,rippleColor:x,rippleDuration:B,...g}=s,P=f.useCallback(()=>d(tailwindTheme.button({variant:p,size:c,rounded:m,color:o}),i),[p,c,m,o,i]),y=l==="a",C=r||e,k=n||o,M={className:P()};return {buttonProps:y?{...M,...g}:{...M,...g,type:a,disabled:C},isAnchor:y,isLoading:r,isDisabled:e,spinner:u,spinnerColor:k,children:v,hasRipple:b,rippleColor:x,rippleDuration:B}}var G=f.forwardRef((s,l)=>{let{buttonProps:a,isAnchor:r,isLoading:i,spinner:u,spinnerColor:e,children:o,isDisabled:n,hasRipple:p,rippleColor:c,rippleDuration:m}=A(s),[v,b]=f.useState(!1),[x,B]=f.useState([]),g=t=>{!r&&(t.key===" "||t.key==="Enter")&&(t.preventDefault(),b(!0),t.currentTarget.click());},P=()=>{b(!1);},y=t=>{if(!p||n)return;let w=t.currentTarget,V=w.getBoundingClientRect(),K=t.pageX-(V.left+window.scrollX),I=t.pageY-(V.top+window.scrollY),O=Math.max(w.offsetWidth,w.offsetHeight)*2,z={x:K,y:I,size:O,id:Date.now()};B(E=>[...E,z]),setTimeout(()=>{B(E=>E.filter(X=>X.id!==z.id));},m||850);},D={...{"aria-disabled":n,"aria-busy":i,role:r?"button":void 0,onKeyDown:g,onKeyUp:P,onMouseDown:t=>{b(!0),y(t);},onMouseUp:()=>{b(!1);},tabIndex:n?-1:0},className:d(a.className,"relative overflow-hidden",v?"animate-press":"")},R=x.map(t=>f__default.default.createElement("span",{key:t.id,className:"absolute rounded-full block pointer-events-none",style:{left:t.x,top:t.y,width:t.size,height:t.size,transform:"translate(-50%, -50%) scale(0)",backgroundColor:c||"rgba(255, 255, 255, 0.35)",animation:`ripple ${m||850}ms ease-out`,opacity:.5}}));return r?f__default.default.createElement("a",{...a,...D,ref:l},o,R):f__default.default.createElement("button",{...a,...D,ref:l},i&&!u&&f__default.default.createElement(L,{label:"Loading...",color:e,"aria-hidden":"true"}),u&&u,i?f__default.default.createElement("span",{className:"sr-only"},o):o,R)});G.displayName="Button";var T=G;function H(s){let{className:l,children:a,rounded:r,...i}=s,u=f.useCallback(()=>tailwindTheme.buttonGroup({rounded:r,className:l}),[r,l]);return {groupProps:{...i,className:u()},children:a}}function S(s){let{groupProps:l,children:a}=H(s),r=f.useRef([]),i=e=>{var c;let o=r.current.filter(m=>!m.hasAttribute("disabled")),n=o.indexOf(document.activeElement);if(n===-1)return;let p=n;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),p=n+1>=o.length?0:n+1;break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),p=n-1<0?o.length-1:n-1;break;case"Home":e.preventDefault(),p=0;break;case"End":e.preventDefault(),p=o.length-1;break}(c=o[p])==null||c.focus();},u=f.Children.map(a,(e,o)=>f.isValidElement(e)&&e.type===T?f.cloneElement(e,{ref:n=>{n&&(r.current[o]=n);}}):e);return f__default.default.createElement("div",{...l,role:l.role||"group",onKeyDown:i},u)}exports.Button=T;exports.ButtonGroup=S;exports.useButton=A;exports.useButtonGroup=H;