stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
4 lines (3 loc) • 4.1 kB
JavaScript
'use client';
"use strict";var e=require("react/jsx-runtime"),r=require("react"),a=require("framer-motion"),i=require("clsx"),o=require("tailwind-merge"),n=function(){return n=Object.assign||function(e){for(var r,a=1,i=arguments.length;a<i;a++)for(var o in r=arguments[a])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(i.clsx(e))}"function"==typeof SuppressedError&&SuppressedError;var d=function(i){var o=i.title,d=i.description,l=i.children,s=i.className,c=void 0===s?"":s,u=i.variant,b=void 0===u?"default":u,m=i.radius,p=void 0===m?"md":m,g=i.hover,v=void 0===g?"none":g,f=i.animation,y=void 0===f?"none":f,h=i.interactive,k=void 0!==h&&h,w=i.footer,x=i.header,N=i.image,j=i.loading,C=void 0===j?"lazy":j,z=i.contentClassName,q=void 0===z?"":z,I=i.titleClassName,D=void 0===I?"":I,E=i.descriptionClassName,O=void 0===E?"":E,H=i.imageClassName,K=void 0===H?"":H,S=i.headerClassName,A=void 0===S?"":S,L=i.footerClassName,M=void 0===L?"":L,P=i.ariaLabel,T=i.imageAlt,B=i.onClick,F=i.onKeyDown,G=i.role,J=void 0===G?"article":G,Q=r.useId(),R="card-".concat(Q.replace(/:/g,"")),U="".concat(R,"-title"),V="".concat(R,"-description"),W={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},X=t("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],W[p],{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],k&&"cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2",k&&"default"===b&&"focus:ring-zinc-500",k&&"primary"===b&&"focus:ring-blue-500",k&&"secondary"===b&&"focus:ring-purple-500",k&&"success"===b&&"focus:ring-green-500",k&&"warning"===b&&"focus:ring-amber-500",k&&"danger"===b&&"focus:ring-red-500",c),Y=t("p-4",q),Z=t("text-lg font-semibold mb-2 dark:text-neutral-100",D),$=t("text-neutral-600 dark:text-neutral-400 mb-4",O),_=t("w-full overflow-hidden",W[p],K),ee=t("p-4",A),re=t("p-4 border-t border-zinc-200 dark:border-zinc-800 mt-auto",M);return e.jsxs(a.motion.div,n({className:X},{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}}}[y],{whileHover:k?{scale:1.02}:void 0,whileTap:k?{scale:.98}:void 0,role:J,"aria-label":P,"aria-labelledby":o?U:void 0,"aria-describedby":d?V:void 0,tabIndex:k?0:void 0,onClick:k?B:void 0,onKeyDown:k?function(e){!k||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null==B||B()),null==F||F(e)}:void 0,id:R,children:[x&&e.jsx("div",{className:ee,role:"presentation",children:x}),N&&e.jsx("div",{className:_,role:"img","aria-label":T||o||"Imagen de la tarjeta",children:e.jsx(a.motion.img,{src:N,alt:T||o||"Imagen de la tarjeta",loading:C,className:"w-full h-48 object-cover",whileHover:{scale:1.05},transition:{duration:.3}})}),e.jsxs("div",{className:Y,role:"region","aria-label":"Contenido principal",children:[o&&e.jsx(a.motion.h3,{className:Z,initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.1},id:U,children:o}),d&&e.jsx(a.motion.p,{className:$,initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.2},id:V,children:d}),l]}),w&&e.jsx("div",{className:re,role:"contentinfo",children:w})]}))};d.displayName="Card",module.exports=d;
//# sourceMappingURL=index.js.map