stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
4 lines (3 loc) • 3.31 kB
JavaScript
'use client';
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("framer-motion"),a=require("clsx"),o=require("tailwind-merge"),n=function(){return n=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},n.apply(this,arguments)};function t(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return o.twMerge(a.clsx(e))}"function"==typeof SuppressedError&&SuppressedError;var d={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"},l={sm:"h-5 px-2 text-xs",md:"h-6 px-2.5",lg:"h-7 px-3"},s={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},c="pl-1.5",u="",b=r.forwardRef((function(a,o){var b=a.children,g=a.className,v=void 0===g?"":g,p=a.dotClassName,m=void 0===p?"":p,h=a.iconClassName,f=void 0===h?"":h,x=a.contentClassName,k=void 0===x?"":x,y=a.variant,w=void 0===y?"default":y,z=a.size,N=void 0===z?"md":z,j=a.radius,C=void 0===j?"full":j,q=a.withDot,D=void 0!==q&&q,E=a.dotColor,I=a.icon,L=a.onClick,O=a.dismissible,S=void 0!==O&&O,A=a.ariaLabel,B=a.dotAriaLabel,K=void 0===B?"Indicador de estado":B,M=a.dismissAriaLabel,P=void 0===M?"Eliminar badge":M,R=a.id,F=r.useState(!0),G=F[0],H=F[1],J=r.useId(),Q=R||"badge-".concat(J.replace(/:/g,"")),T=D?"".concat(Q,"-dot"):void 0,U=I?"".concat(Q,"-icon"):void 0,V="".concat(Q,"-content"),W=S?"".concat(Q,"-dismiss"):void 0;if(!G)return null;var X=function(e){S&&(e.preventDefault(),H(!1)),null==L||L()},Y=S||L?{role:"button",tabIndex:0,"aria-label":A||("string"==typeof b?b:void 0),"aria-pressed":void 0,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),X(e))},id:Q,"aria-controls":S?W:void 0}:{role:"status","aria-label":A,id:Q},Z=S||L?"cursor-pointer":"";return e.jsxs(i.motion.div,n({ref:o,initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.9,opacity:0},className:t("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",d[w],l[N],s[C],D?c:u,Z,v),onClick:L||S?X:void 0},Y,{children:[D&&e.jsx("div",{id:T,className:t("w-2 h-2 rounded-full mr-1.5",E||("outline"===w?"bg-zinc-500 dark:bg-zinc-400":"bg-white dark:bg-white"),m),role:"presentation","aria-label":K,"aria-hidden":"true"}),I&&e.jsx("span",{id:U,className:t("mr-1",f),role:"presentation","aria-hidden":"true",children:I}),e.jsx("span",{id:V,className:t(k),children:b}),S&&e.jsx("span",{id:W,className:"sr-only",role:"alert","aria-live":"polite",children:P})]}))}));b.displayName="Badge",module.exports=b;
//# sourceMappingURL=index.js.map