stofli-ui/dist/components/card/index.esm.js

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

'use client';
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useId as a}from"react";import{motion as i}from"framer-motion";import{clsx as o}from"clsx";import{twMerge as n}from"tailwind-merge";var t=function(){return t=Object.assign||function(r){for(var e,a=1,i=arguments.length;a<i;a++)for(var o in e=arguments[a])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},t.apply(this,arguments)};function d(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return n(o(r))}"function"==typeof SuppressedError&&SuppressedError;var l=function(o){var n=o.title,l=o.description,s=o.children,c=o.className,m=void 0===c?"":c,u=o.variant,b=void 0===u?"default":u,p=o.radius,g=void 0===p?"md":p,f=o.hover,v=void 0===f?"none":f,y=o.animation,h=void 0===y?"none":y,k=o.interactive,w=void 0!==k&&k,N=o.footer,x=o.header,C=o.image,z=o.loading,j=void 0===z?"lazy":z,D=o.contentClassName,E=void 0===D?"":D,I=o.titleClassName,O=void 0===I?"":I,H=o.descriptionClassName,K=void 0===H?"":H,S=o.imageClassName,A=void 0===S?"":S,L=o.headerClassName,P=void 0===L?"":L,T=o.footerClassName,q=void 0===T?"":T,B=o.ariaLabel,F=o.imageAlt,G=o.onClick,J=o.onKeyDown,M=o.role,Q=void 0===M?"article":M,R=a(),U="card-".concat(R.replace(/:/g,"")),V="".concat(U,"-title"),W="".concat(U,"-description"),X={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},Y=d("relative overflow-hidden",{default:"bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800",primary:"bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800",secondary:"bg-purple-50 dark:bg-purple-900/10 border border-purple-200 dark:border-purple-800",success:"bg-green-50 dark:bg-green-900/10 border border-green-200 dark:border-green-800",warning:"bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800",danger:"bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800"}[b],X[g],{none:"",lift:"hover:-translate-y-1 transition-transform",glow:"hover:shadow-lg hover:shadow-zinc-200/50 dark:hover:shadow-zinc-800/50 transition-shadow",scale:"hover:scale-[1.02] transition-transform"}[v],w&&"cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2",w&&"default"===b&&"focus:ring-zinc-500",w&&"primary"===b&&"focus:ring-blue-500",w&&"secondary"===b&&"focus:ring-purple-500",w&&"success"===b&&"focus:ring-green-500",w&&"warning"===b&&"focus:ring-amber-500",w&&"danger"===b&&"focus:ring-red-500",m),Z=d("p-4",E),$=d("text-lg font-semibold mb-2 dark:text-neutral-100",O),_=d("text-neutral-600 dark:text-neutral-400 mb-4",K),rr=d("w-full overflow-hidden",X[g],A),er=d("p-4",P),ar=d("p-4 border-t border-zinc-200 dark:border-zinc-800 mt-auto",q);return r(i.div,t({className:Y},{none:{},fade:{initial:{opacity:0},animate:{opacity:1},transition:{duration:.3}},slide:{initial:{x:-20,opacity:0},animate:{x:0,opacity:1},transition:{duration:.4}},bounce:{initial:{y:20,opacity:0},animate:{y:0,opacity:1},transition:{type:"spring",stiffness:300,damping:20}}}[h],{whileHover:w?{scale:1.02}:void 0,whileTap:w?{scale:.98}:void 0,role:Q,"aria-label":B,"aria-labelledby":n?V:void 0,"aria-describedby":l?W:void 0,tabIndex:w?0:void 0,onClick:w?G:void 0,onKeyDown:w?function(r){!w||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),null==G||G()),null==J||J(r)}:void 0,id:U,children:[x&&e("div",{className:er,role:"presentation",children:x}),C&&e("div",{className:rr,role:"img","aria-label":F||n||"Imagen de la tarjeta",children:e(i.img,{src:C,alt:F||n||"Imagen de la tarjeta",loading:j,className:"w-full h-48 object-cover",whileHover:{scale:1.05},transition:{duration:.3}})}),r("div",{className:Z,role:"region","aria-label":"Contenido principal",children:[n&&e(i.h3,{className:$,initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.1},id:V,children:n}),l&&e(i.p,{className:_,initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.2},id:W,children:l}),s]}),N&&e("div",{className:ar,role:"contentinfo",children:N})]}))};l.displayName="Card";export{l as default};
//# sourceMappingURL=index.esm.js.map