UNPKG

stofli-ui

Version:

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

4 lines (3 loc) 3.33 kB
'use client'; import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{useId as a}from"react";import{motion as o}from"framer-motion";import{clsx as t}from"clsx";import{twMerge as n}from"tailwind-merge";var d=function(){return d=Object.assign||function(e){for(var r,i=1,a=arguments.length;i<a;i++)for(var o in r=arguments[i])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},d.apply(this,arguments)};function l(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return n(t(e))}"function"==typeof SuppressedError&&SuppressedError;var s={default:"bg-zinc-400 text-neutral-50 dark:bg-zinc-800 dark:text-neutral-200 hover:bg-zinc-800 dark:hover:bg-zinc-600",primary:"bg-blue-400 text-white dark:bg-blue-800 hover:bg-blue-600 dark:hover:bg-blue-500",secondary:"bg-purple-400 text-white dark:bg-purple-800 hover:bg-purple-600 dark:hover:bg-purple-500",success:"bg-green-400 text-white dark:bg-green-800 hover:bg-green-600 dark:hover:bg-green-500",warning:"bg-amber-400 text-white dark:bg-amber-800 hover:bg-amber-600 dark:hover:bg-amber-500",danger:"bg-red-400 text-white dark:bg-red-800 hover:bg-red-600 dark:hover:bg-red-500",outline:"border-2 border-zinc-200 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800"},c={sm:"h-5 px-2 text-xs",md:"h-6 px-2.5",lg:"h-7 px-3"},u={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},b="pl-1.5",g="",m=i.forwardRef((function(t,n){var m=t.children,p=t.className,v=void 0===p?"":p,f=t.dotClassName,h=void 0===f?"":f,k=t.iconClassName,x=void 0===k?"":k,y=t.contentClassName,w=void 0===y?"":y,z=t.variant,N=void 0===z?"default":z,C=t.size,j=void 0===C?"md":C,D=t.radius,E=void 0===D?"full":D,L=t.withDot,O=void 0!==L&&L,S=t.dotColor,A=t.icon,I=t.onClick,B=t.dismissible,K=void 0!==B&&B,P=t.ariaLabel,R=t.dotAriaLabel,q=void 0===R?"Indicador de estado":R,F=t.dismissAriaLabel,G=void 0===F?"Eliminar badge":F,H=t.id,J=i.useState(!0),M=J[0],Q=J[1],T=a(),U=H||"badge-".concat(T.replace(/:/g,"")),V=O?"".concat(U,"-dot"):void 0,W=A?"".concat(U,"-icon"):void 0,X="".concat(U,"-content"),Y=K?"".concat(U,"-dismiss"):void 0;if(!M)return null;var Z=function(e){K&&(e.preventDefault(),Q(!1)),null==I||I()},$=K||I?{role:"button",tabIndex:0,"aria-label":P||("string"==typeof m?m:void 0),"aria-pressed":void 0,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Z(e))},id:U,"aria-controls":K?Y:void 0}:{role:"status","aria-label":P,id:U},_=K||I?"cursor-pointer":"";return e(o.div,d({ref:n,initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.9,opacity:0},className:l("inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900",s[N],c[j],u[E],O?b:g,_,v),onClick:I||K?Z:void 0},$,{children:[O&&r("div",{id:V,className:l("w-2 h-2 rounded-full mr-1.5",S||("outline"===N?"bg-zinc-500 dark:bg-zinc-400":"bg-white dark:bg-white"),h),role:"presentation","aria-label":q,"aria-hidden":"true"}),A&&r("span",{id:W,className:l("mr-1",x),role:"presentation","aria-hidden":"true",children:A}),r("span",{id:X,className:l(w),children:m}),K&&r("span",{id:Y,className:"sr-only",role:"alert","aria-live":"polite",children:G})]}))}));m.displayName="Badge";export{m as default}; //# sourceMappingURL=index.esm.js.map