UNPKG

stofli-ui

Version:

Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion

4 lines (3 loc) 7.56 kB
'use client'; import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as i,useId as a,useEffect as t}from"react";import{motion as o}from"framer-motion";import{clsx as l}from"clsx";import{twMerge as n}from"tailwind-merge";function c(e,r,i){if(i||2===arguments.length)for(var a,t=0,o=r.length;t<o;t++)!a&&t in r||(a||(a=Array.prototype.slice.call(r,0,t)),a[t]=r[t]);return e.concat(a||Array.prototype.slice.call(r))}function d(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return n(l(e))}"function"==typeof SuppressedError&&SuppressedError;var s=function(l){var n=l.checked,s=void 0!==n&&n,b=l.onChange,g=l.disabled,v=void 0!==g&&g,p=l.size,u=void 0===p?"md":p,h=l.variant,f=void 0===h?"default":h,k=l.label,m=l.labelPosition,x=void 0===m?"right":m,w=l.required,y=void 0!==w&&w,z=l.name,C=l.className,N=void 0===C?"":C,B=l.circleClassName,H=void 0===B?"":B,S=l.activeCircleClassName,L=void 0===S?"":S,X=l.inactiveCircleClassName,j=void 0===X?"":X,W=l.labelClassName,q=void 0===W?"":W,A=l.wrapperClassName,E=void 0===A?"":A,F=l.activeWrapperClassName,I=void 0===F?"":F,P=l.inactiveWrapperClassName,T=void 0===P?"":P,D=l.iconClassName,G=void 0===D?"":D,J=l.id,K=l.icon,M=void 0!==K&&K,O=l.iconType,Q=void 0===O?"check":O,R=l.ariaLabel,U=l.description,V=l.descriptionId,Y=i(s),Z=Y[0],$=Y[1],_=a(),ee=J||"switch-".concat(_.replace(/:/g,"")),re=V||(U?"desc-".concat(ee):void 0);t((function(){$(s)}),[s]);var ie,ae={sm:{wrapper:"h-4 w-7",circle:"h-3 w-3",iconSize:"h-2 w-2",label:"text-sm",padding:"px-0.5",translateX:{on:"14px",off:"0px"},top:"top-[2px]"},md:{wrapper:"h-5 w-10",circle:"h-4 w-4",iconSize:"h-2.5 w-2.5",label:"text-base",padding:"px-0.5",translateX:{on:"20px",off:"0px"},top:"top-[2px]"},lg:{wrapper:"h-7 w-14",circle:"h-6 w-6",iconSize:"h-3.5 w-3.5",label:"text-lg",padding:"px-0.5",translateX:{on:"28px",off:"0px"},top:"top-[2px]"}},te={default:{bg:"bg-zinc-200 dark:bg-zinc-800",activeBg:"bg-zinc-600 dark:bg-zinc-400",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-neutral-700 dark:text-neutral-800",hover:"hover:border-zinc-300 dark:hover:border-zinc-600",activeHover:"hover:bg-zinc-700 dark:hover:bg-zinc-500",label:"text-neutral-900 dark:text-neutral-100"},primary:{bg:"bg-blue-200 dark:bg-blue-950",activeBg:"bg-blue-500 dark:bg-blue-500",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-blue-600 dark:text-blue-600",hover:"hover:border-blue-300 dark:hover:border-blue-700",activeHover:"hover:bg-blue-600 dark:hover:bg-blue-600",label:"text-blue-600 dark:text-blue-300"},secondary:{bg:"bg-purple-200 dark:bg-purple-950",activeBg:"bg-purple-500 dark:bg-purple-500",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-purple-600 dark:text-purple-600",hover:"hover:border-purple-300 dark:hover:border-purple-700",activeHover:"hover:bg-purple-600 dark:hover:bg-purple-600",label:"text-purple-600 dark:text-purple-300"},success:{bg:"bg-green-200 dark:bg-green-950",activeBg:"bg-green-500 dark:bg-green-500",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-green-600 dark:text-green-600",hover:"hover:border-green-300 dark:hover:border-green-700",activeHover:"hover:bg-green-600 dark:hover:bg-green-600",label:"text-green-600 dark:text-green-300"},warning:{bg:"bg-amber-200 dark:bg-amber-950",activeBg:"bg-amber-500 dark:bg-amber-500",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-amber-600 dark:text-amber-600",hover:"hover:border-amber-300 dark:hover:border-amber-700",activeHover:"hover:bg-amber-600 dark:hover:bg-amber-600",label:"text-amber-600 dark:text-amber-300"},danger:{bg:"bg-red-200 dark:bg-red-950",activeBg:"bg-red-500 dark:bg-red-500",circle:"bg-white dark:bg-zinc-200",activeCircle:"bg-white dark:bg-white",icon:"text-red-600 dark:text-red-600",hover:"hover:border-red-300 dark:hover:border-red-700",activeHover:"hover:bg-red-600 dark:hover:bg-red-600",label:"text-red-600 dark:text-red-300"}},oe=function(){if(!v){var e=!Z;$(e),null==b||b(e)}};return e("div",{className:d("flex items-center gap-2","left"===x?"flex-row-reverse":"flex-row",N),children:[k&&e("label",{htmlFor:ee,className:d(ae[u].label,te[f].label,v?"opacity-50 cursor-not-allowed":"cursor-pointer",q),children:[k,y&&r("span",{className:"text-red-500 ml-1",children:"*"})]}),e("div",{className:d("relative inline-flex flex-shrink-0 items-center",E),children:[r("input",{type:"checkbox",role:"switch",id:ee,name:z,className:d("sr-only peer",{sm:"focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",md:"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900",lg:"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900"}[u],{default:"focus-visible:ring-zinc-500 dark:focus-visible:ring-zinc-400",primary:"focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400",secondary:"focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400",success:"focus-visible:ring-green-500 dark:focus-visible:ring-green-400",warning:"focus-visible:ring-amber-500 dark:focus-visible:ring-amber-400",danger:"focus-visible:ring-red-500 dark:focus-visible:ring-red-400"}[f]),checked:Z,onChange:oe,disabled:v,required:y,"aria-checked":Z,"aria-label":k?void 0:R,"aria-labelledby":k?ee:void 0,"aria-describedby":re}),e("div",{className:(ie=[ae[u].wrapper,ae[u].padding,"rounded-full",v?"opacity-50 cursor-not-allowed":"cursor-pointer","transition-all duration-300 ease-out relative overflow-hidden"],Z?I?d.apply(void 0,c(c([],ie,!1),[I],!1)):d.apply(void 0,c(c([],ie,!1),[te[f].activeBg,!v&&te[f].activeHover,E],!1)):T?d.apply(void 0,c(c([],ie,!1),[T],!1)):d.apply(void 0,c(c([],ie,!1),[te[f].bg,!v&&te[f].hover,E],!1))),onClick:oe,"aria-hidden":"true",children:[!I&&!T&&r(o.div,{className:d("absolute inset-0",te[f].activeBg),initial:{opacity:0},animate:{opacity:Z?1:0},transition:{duration:.3,ease:[.4,0,.2,1]},"aria-hidden":"true"}),r(o.div,{className:function(){var e=[ae[u].circle,"rounded-full shadow-md flex items-center justify-center z-10","absolute left-0.5",ae[u].top];return Z?L?d.apply(void 0,c(c([],e,!1),[H,L],!1)):d.apply(void 0,c(c([],e,!1),[te[f].activeCircle,H],!1)):j?d.apply(void 0,c(c([],e,!1),[H,j],!1)):d.apply(void 0,c(c([],e,!1),[te[f].circle,H],!1))}(),initial:!1,animate:{x:Z?ae[u].translateX.on:ae[u].translateX.off},transition:{type:"spring",stiffness:500,damping:30},"aria-hidden":"true",children:M&&"none"!==Q?"check"===Q?r(o.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:d(ae[u].iconSize,Z?te[f].icon:"text-transparent",G),initial:{opacity:0,scale:0},animate:{opacity:Z?1:0,scale:Z?1:0},transition:{duration:.3,ease:[.4,0,.2,1]},children:r("polyline",{points:"20 6 9 17 4 12"})}):e(o.svg,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:d(ae[u].iconSize,Z?"text-transparent":te[f].icon,G),initial:{opacity:0,scale:0},animate:{opacity:Z?0:1,scale:Z?0:1},transition:{duration:.3,ease:[.4,0,.2,1]},children:[r("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}):null})]})]}),U&&r("div",{id:re,className:"sr-only",children:U})]})};export{s as default}; //# sourceMappingURL=index.esm.js.map