react-pop-cards 2.0.2 → 2.1.0

package/README.md

@@ -27,6 +27,7 @@ bun add react-pop-cards
 
 ```tsx
 import { Card } from "react-pop-cards";
+import "react-pop-cards/styles.css";
 
 const data = [
   {

package/dist/index.d.mts

@@ -19,6 +19,62 @@ interface CardProps {
     /** Spring animation friction (higher = more damped) */
     friction?: number;
 }
-declare function Card({ data, bgColor, disposition, isRounded, tension, friction }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ data, bgColor, disposition, isRounded, tension, friction }: Readonly<CardProps>): react_jsx_runtime.JSX.Element;
 
-export { Card, type CardItem, type CardProps };
+interface CardStackProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardStack({ data, bgColor, isRounded, tension, friction }: Readonly<CardStackProps>): react_jsx_runtime.JSX.Element;
+
+interface CardCarouselProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardCarousel({ data, bgColor, isRounded, tension, friction }: Readonly<CardCarouselProps>): react_jsx_runtime.JSX.Element;
+
+interface CardAccordionProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardAccordion({ data, bgColor, isRounded, tension, friction }: Readonly<CardAccordionProps>): react_jsx_runtime.JSX.Element;
+
+interface CardFlipProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardFlip({ data, bgColor, isRounded, tension, friction }: Readonly<CardFlipProps>): react_jsx_runtime.JSX.Element;
+
+export { Card, CardAccordion, type CardAccordionProps, CardCarousel, type CardCarouselProps, CardFlip, type CardFlipProps, type CardItem, type CardProps, CardStack, type CardStackProps };

package/dist/index.d.ts

@@ -19,6 +19,62 @@ interface CardProps {
     /** Spring animation friction (higher = more damped) */
     friction?: number;
 }
-declare function Card({ data, bgColor, disposition, isRounded, tension, friction }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ data, bgColor, disposition, isRounded, tension, friction }: Readonly<CardProps>): react_jsx_runtime.JSX.Element;
 
-export { Card, type CardItem, type CardProps };
+interface CardStackProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardStack({ data, bgColor, isRounded, tension, friction }: Readonly<CardStackProps>): react_jsx_runtime.JSX.Element;
+
+interface CardCarouselProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardCarousel({ data, bgColor, isRounded, tension, friction }: Readonly<CardCarouselProps>): react_jsx_runtime.JSX.Element;
+
+interface CardAccordionProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardAccordion({ data, bgColor, isRounded, tension, friction }: Readonly<CardAccordionProps>): react_jsx_runtime.JSX.Element;
+
+interface CardFlipProps {
+    /** Array of card items to display */
+    data: CardItem[];
+    /** Background color of the cards (hex string) */
+    bgColor?: string;
+    /** Whether cards have rounded corners */
+    isRounded?: boolean;
+    /** Spring animation tension */
+    tension?: number;
+    /** Spring animation friction */
+    friction?: number;
+}
+declare function CardFlip({ data, bgColor, isRounded, tension, friction }: Readonly<CardFlipProps>): react_jsx_runtime.JSX.Element;
+
+export { Card, CardAccordion, type CardAccordionProps, CardCarousel, type CardCarouselProps, CardFlip, type CardFlipProps, type CardItem, type CardProps, CardStack, type CardStackProps };

package/dist/index.js

@@ -1,2 +1,2 @@
-'use strict';var web=require('@react-spring/web'),j=require('chroma-js'),react=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var j__default=/*#__PURE__*/_interopDefault(j);function v(t){let[s,i]=react.useState(()=>typeof window>"u"?false:window.matchMedia(t).matches);return react.useEffect(()=>{let c=window.matchMedia(t),n=m=>{i(m.matches);};return i(c.matches),c.addEventListener("change",n),()=>c.removeEventListener("change",n)},[t]),s}function o(...t){return t.filter(Boolean).join(" ")}var k="#e5e7eb",B=120,D=10,O={width:"6rem",height:"6rem"},F={width:"20rem",height:"20rem"},Q={width:"11rem",height:"11rem"},z={0:"flex justify-end items-end",1:"flex items-end",2:"flex justify-end",3:"flex"};function P({data:t,bgColor:s=k,disposition:i="LeftRight",isRounded:c=false,tension:n=B,friction:m=D}){let l=v("(max-width: 640px)"),w=react.useRef(null),[d,N]=react.useState(t[0]?.title??""),b=react.useMemo(()=>{try{return j__default.default(s).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[s]),f=react.useCallback(e=>e===d?l?Q:F:O,[d,l]),[E,g]=web.useSprings(t.length,e=>({width:f(t[e].title).width,height:f(t[e].title).height,backgroundColor:s,config:{tension:n,friction:m}}));react.useEffect(()=>{g.start(e=>({width:f(t[e].title).width,height:f(t[e].title).height,backgroundColor:s,config:{tension:n,friction:m}}));},[d,s,n,m,l,t,g,f]);let p=react.useCallback(e=>{N(e);},[]),L=react.useMemo(()=>{let e="flex flex-col justify-center items-center gap-8 h-full";switch(i){case "LeftRight":return l?e:"grid grid-cols-5 h-full";case "RightLeft":return l?"flex flex-col-reverse justify-center items-center gap-8 h-full":"grid grid-cols-5 h-full";case "TopBottom":return e;case "BottomTop":return "flex flex-col-reverse justify-center items-center gap-8 h-full";default:return "grid grid-cols-5 h-full"}},[i,l]),x=c?"rounded-2xl":"rounded-none";return jsxRuntime.jsxs("div",{className:L,children:[jsxRuntime.jsx("div",{className:o("col-span-3 flex justify-center items-center duration-100",i==="LeftRight"?"order-1":"order-2"),children:jsxRuntime.jsx("div",{className:"grid grid-cols-2 gap-2",children:t.map((e,u)=>{let a=d===e.title;return jsxRuntime.jsx("div",{className:z[u]??"flex",children:jsxRuntime.jsx("div",{style:{color:b},children:jsxRuntime.jsx(web.animated.div,{ref:a?w:void 0,style:E[u],onClick:()=>p(e.title),className:o("cursor-pointer duration-100",x,a?"px-6 py-4":"flex justify-center items-center"),children:jsxRuntime.jsxs("div",{className:a?"min-h-full":"max-sm:space-y-1 space-y-3",children:[jsxRuntime.jsxs("div",{className:"flex max-sm:flex-col-reverse justify-between items-center",children:[jsxRuntime.jsx("label",{className:o("capitalize font-bold duration-100",a?"max-sm:text-xl text-5xl":"max-sm:text-xs text-base"),children:e.title}),a&&e.image&&jsxRuntime.jsx("img",{className:"max-sm:w-12 max-sm:h-12 w-20 h-20",src:e.image,alt:`${e.title} card`})]}),a&&jsxRuntime.jsx("p",{className:"line-clamp-[8] text-justify max-sm:text-xs",children:e.description})]})})})},e.title)})})}),jsxRuntime.jsx("div",{className:o("col-span-2 gap-4 flex justify-center items-center duration-100",i==="RightLeft"?"order-1":"order-2"),children:t.map(e=>{let u=d===e.title;return jsxRuntime.jsx("div",{onClick:()=>p(e.title),className:o("bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center","max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg",x,u?"scale-105 shadow-xl":"scale-90"),children:jsxRuntime.jsx("label",{className:"text-center text-xs capitalize",children:e.title})},e.title)})})]})}exports.Card=P;//# sourceMappingURL=index.js.map
+'use strict';var web=require('@react-spring/web'),$=require('chroma-js'),react=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var $__default=/*#__PURE__*/_interopDefault($);function F(t){let[o,u]=react.useState(()=>typeof window>"u"?false:window.matchMedia(t).matches);return react.useEffect(()=>{let c=window.matchMedia(t),d=n=>{u(n.matches);};return u(c.matches),c.addEventListener("change",d),()=>c.removeEventListener("change",d)},[t]),o}function p(...t){return t.filter(Boolean).join(" ")}var W="#e5e7eb",J=120,q=10,ee={width:"6rem",height:"6rem"},te={width:"20rem",height:"20rem"},re={width:"11rem",height:"11rem"},ae={0:"flex justify-end items-end",1:"flex items-end",2:"flex justify-end",3:"flex"};function oe({data:t,bgColor:o=W,disposition:u="LeftRight",isRounded:c=false,tension:d=J,friction:n=q}){let i=F("(max-width: 640px)"),b=react.useRef(null),[x,g]=react.useState(t[0]?.title??""),C=react.useMemo(()=>{try{return $__default.default(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),h=react.useCallback(r=>r===x?i?re:te:ee,[x,i]),[l,m]=web.useSprings(t.length,r=>({width:h(t[r].title).width,height:h(t[r].title).height,backgroundColor:o,config:{tension:d,friction:n}}));react.useEffect(()=>{m.start(r=>({width:h(t[r].title).width,height:h(t[r].title).height,backgroundColor:o,config:{tension:d,friction:n}}));},[x,o,d,n,i,t,m,h]);let s=react.useCallback(r=>{g(r);},[]),e=react.useMemo(()=>{let r="flex flex-col justify-center items-center gap-8 h-full";switch(u){case "LeftRight":return i?r:"grid grid-cols-5 h-full";case "RightLeft":return i?"flex flex-col-reverse justify-center items-center gap-8 h-full":"grid grid-cols-5 h-full";case "TopBottom":return r;case "BottomTop":return "flex flex-col-reverse justify-center items-center gap-8 h-full";default:return "grid grid-cols-5 h-full"}},[u,i]),a=c?"rounded-2xl":"rounded-none";return jsxRuntime.jsxs("div",{className:e,children:[jsxRuntime.jsx("div",{className:p("col-span-3 flex justify-center items-center duration-100",u==="LeftRight"?"order-1":"order-2"),children:jsxRuntime.jsx("div",{className:"grid grid-cols-2 gap-2",children:t.map((r,f)=>{let v=x===r.title;return jsxRuntime.jsx("div",{className:ae[f]??"flex",children:jsxRuntime.jsx("div",{style:{color:C},children:jsxRuntime.jsx(web.animated.div,{ref:v?b:void 0,style:l[f],onClick:()=>s(r.title),className:p("cursor-pointer duration-100",a,v?"px-6 py-4":"flex justify-center items-center"),children:jsxRuntime.jsxs("div",{className:v?"min-h-full":"max-sm:space-y-1 space-y-3",children:[jsxRuntime.jsxs("div",{className:"flex max-sm:flex-col-reverse justify-between items-center",children:[jsxRuntime.jsx("label",{className:p("capitalize font-bold duration-100",v?"max-sm:text-xl text-5xl":"max-sm:text-xs text-base"),children:r.title}),v&&r.image&&jsxRuntime.jsx("img",{className:"max-sm:w-12 max-sm:h-12 w-20 h-20",src:r.image,alt:`${r.title} card`})]}),v&&jsxRuntime.jsx("p",{className:"line-clamp-[8] text-justify max-sm:text-xs",children:r.description})]})})})},r.title)})})}),jsxRuntime.jsx("div",{className:p("col-span-2 gap-4 flex justify-center items-center duration-100",u==="RightLeft"?"order-1":"order-2"),children:t.map(r=>{let f=x===r.title;return jsxRuntime.jsx("div",{onClick:()=>s(r.title),className:p("bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center","max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg",a,f?"scale-105 shadow-xl":"scale-90"),children:jsxRuntime.jsx("label",{className:"text-center text-xs capitalize",children:r.title})},r.title)})})]})}var me="#e5e7eb",pe=120,ue=14,P=280,M=320;function fe({data:t,bgColor:o=me,isRounded:u=false,tension:c=pe,friction:d=ue}){let[n,i]=react.useState(0),b=react.useMemo(()=>{try{return $__default.default(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",g=react.useCallback(e=>{let a=e-n;if(a===0)return {x:0,y:0,scale:1,rotate:0,opacity:1,zIndex:t.length};let r=a>0?1:-1,f=Math.abs(a);return {x:r*f*40,y:-f*8,scale:1-f*.06,rotate:r*f*4,opacity:Math.max(.3,1-f*.25),zIndex:t.length-f}},[n,t.length]),[C,h]=web.useSprings(t.length,e=>{let a=g(e);return {x:a.x,y:a.y,scale:a.scale,rotate:a.rotate,opacity:a.opacity,config:{tension:c,friction:d}}});react.useEffect(()=>{h.start(e=>{let a=g(e);return {x:a.x,y:a.y,scale:a.scale,rotate:a.rotate,opacity:a.opacity,config:{tension:c,friction:d}}});},[n,o,c,d,h,g]);let l=react.useCallback(e=>{i(e);},[]),m=react.useCallback(()=>{i(e=>e>0?e-1:t.length-1);},[t.length]),s=react.useCallback(()=>{i(e=>e<t.length-1?e+1:0);},[t.length]);return jsxRuntime.jsxs("div",{className:"flex flex-col items-center gap-8",children:[jsxRuntime.jsx("div",{className:"relative",style:{width:P,height:M},children:t.map((e,a)=>{let r=C[a],f=a===n;return jsxRuntime.jsx(web.animated.div,{onClick:()=>l(a),style:{...r,backgroundColor:o,color:b,position:"absolute",width:P,height:M,zIndex:g(a).zIndex,transform:r.x.to(v=>`translateX(${v}px) translateY(${r.y.get()}px) rotate(${r.rotate.get()}deg) scale(${r.scale.get()})`),cursor:"pointer"},className:p("shadow-lg px-6 py-4 duration-100",x),children:jsxRuntime.jsxs("div",{className:"flex flex-col h-full",children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-center",children:[jsxRuntime.jsx("label",{className:"font-bold text-2xl capitalize",children:e.title}),f&&e.image&&jsxRuntime.jsx("img",{className:"w-16 h-16 rounded",src:e.image,alt:`${e.title}`})]}),f&&jsxRuntime.jsx("p",{className:"mt-3 text-sm text-justify line-clamp-[8]",children:e.description}),!f&&jsxRuntime.jsx("div",{className:"flex-1 flex items-center justify-center",children:jsxRuntime.jsx("span",{className:"text-sm opacity-65",children:e.title})})]})},e.title)})}),jsxRuntime.jsxs("div",{className:"flex gap-4 items-center",children:[jsxRuntime.jsx("button",{onClick:m,className:"btn btn-sm btn-ghost","aria-label":"Previous card",children:"\u2190"}),t.map((e,a)=>jsxRuntime.jsx("button",{onClick:()=>l(a),className:p("w-2.5 h-2.5 rounded-full duration-200 cursor-pointer",a===n?"scale-125":"opacity-50"),style:{backgroundColor:o},"aria-label":`Go to ${e.title}`},e.title)),jsxRuntime.jsx("button",{onClick:s,className:"btn btn-sm btn-ghost","aria-label":"Next card",children:"\u2192"})]})]})}var ve="#e5e7eb",Ne=170,we=26;function Ie({data:t,bgColor:o=ve,isRounded:u=false,tension:c=Ne,friction:d=we}){let[n,i]=react.useState(0),b=react.useMemo(()=>{try{return $__default.default(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",g=react.useCallback(s=>{let e=s-n,a=Math.abs(e),r=e===0;return {translateX:e*200,scale:r?1:Math.max(.7,1-a*.15),opacity:r?1:Math.max(.4,1-a*.3),height:r?300:220,width:r?300:200,zIndex:t.length-a}},[n,t.length]),[C,h]=web.useSprings(t.length,s=>{let e=g(s);return {translateX:e.translateX,scale:e.scale,opacity:e.opacity,height:e.height,width:e.width,config:{tension:c,friction:d}}});react.useEffect(()=>{h.start(s=>{let e=g(s);return {translateX:e.translateX,scale:e.scale,opacity:e.opacity,height:e.height,width:e.width,config:{tension:c,friction:d}}});},[n,o,c,d,h,g]);let l=react.useCallback(()=>{i(s=>s>0?s-1:t.length-1);},[t.length]),m=react.useCallback(()=>{i(s=>s<t.length-1?s+1:0);},[t.length]);return jsxRuntime.jsxs("div",{className:"flex flex-col items-center gap-6",children:[jsxRuntime.jsx("div",{className:"relative flex items-center justify-center",style:{height:320,width:"100%"},children:t.map((s,e)=>{let a=C[e],r=e===n,f=g(e).zIndex;return jsxRuntime.jsx(web.animated.div,{onClick:()=>i(e),style:{backgroundColor:o,color:b,position:"absolute",zIndex:f,width:a.width,height:a.height,opacity:a.opacity,transform:a.translateX.to(v=>`translateX(${v}px) scale(${a.scale.get()})`),cursor:"pointer"},className:p("shadow-lg overflow-hidden duration-100",x),children:jsxRuntime.jsxs("div",{className:"p-5 flex flex-col h-full",children:[jsxRuntime.jsxs("div",{className:"flex justify-between items-start",children:[jsxRuntime.jsx("label",{className:p("font-bold capitalize duration-100",r?"text-2xl":"text-base"),children:s.title}),r&&s.image&&jsxRuntime.jsx("img",{className:"w-14 h-14 rounded",src:s.image,alt:s.title})]}),r&&jsxRuntime.jsx("p",{className:"mt-3 text-sm text-justify line-clamp-[7] flex-1",children:s.description})]})},s.title)})}),jsxRuntime.jsxs("div",{className:"flex gap-4 items-center",children:[jsxRuntime.jsx("button",{onClick:l,className:"btn btn-sm btn-ghost","aria-label":"Previous",children:"\u2190"}),t.map((s,e)=>jsxRuntime.jsx("button",{onClick:()=>i(e),className:p("w-2.5 h-2.5 rounded-full duration-200 cursor-pointer",e===n?"scale-125":"opacity-50"),style:{backgroundColor:o},"aria-label":`Go to ${s.title}`},s.title)),jsxRuntime.jsx("button",{onClick:m,className:"btn btn-sm btn-ghost","aria-label":"Next",children:"\u2192"})]})]})}var _e="#e5e7eb",Fe=180,Oe=22,j=56,z=280;function De({data:t,bgColor:o=_e,isRounded:u=false,tension:c=Fe,friction:d=Oe}){let[n,i]=react.useState(0),b=react.useMemo(()=>{try{return $__default.default(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",[g,C]=web.useSprings(t.length,l=>({height:l===n?z:j,opacity:l===n?1:.7,config:{tension:c,friction:d}}));react.useEffect(()=>{C.start(l=>({height:l===n?z:j,opacity:l===n?1:.7,config:{tension:c,friction:d}}));},[n,c,d,C]);let h=react.useCallback(l=>{i(l);},[]);return jsxRuntime.jsx("div",{className:"flex flex-col gap-2 w-full max-w-md mx-auto",children:t.map((l,m)=>{let s=g[m],e=m===n;return jsxRuntime.jsxs(web.animated.div,{onClick:()=>h(m),style:{height:s.height,opacity:s.opacity,backgroundColor:o,color:b,overflow:"hidden",cursor:"pointer"},className:p("shadow-lg px-5 duration-100",x),children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between h-14",children:[jsxRuntime.jsx("label",{className:"font-bold text-lg capitalize",children:l.title}),jsxRuntime.jsx("span",{className:p("text-sm duration-200",e?"rotate-180":"rotate-0"),children:"\u25BC"})]}),e&&jsxRuntime.jsx("div",{className:"pb-4",children:jsxRuntime.jsxs("div",{className:"flex gap-4 items-start",children:[l.image&&jsxRuntime.jsx("img",{className:"w-20 h-20 rounded",src:l.image,alt:l.title}),jsxRuntime.jsx("p",{className:"text-sm text-justify line-clamp-[8] flex-1",children:l.description})]})})]},l.title)})})}var ze="#e5e7eb",Ue=300,$e=30;function Be({item:t,bgColor:o,textColor:u,cornerClass:c,tension:d,friction:n}){let[i,b]=react.useState(false),{rotateY:x,frontOpacity:g,backOpacity:C}=web.useSpring({rotateY:i?180:0,frontOpacity:i?0:1,backOpacity:i?1:0,config:{tension:d,friction:n}}),h=react.useCallback(()=>{b(m=>!m);},[]),l=react.useMemo(()=>{try{return $__default.default(o).darken(.5).hex()}catch{return o}},[o]);return jsxRuntime.jsxs("div",{role:"button",tabIndex:0,className:"cursor-pointer",style:{perspective:800,width:200,height:240},onClick:h,onKeyDown:m=>{(m.key==="Enter"||m.key===" ")&&h();},children:[jsxRuntime.jsxs(web.animated.div,{style:{position:"absolute",width:"100%",height:"100%",backfaceVisibility:"hidden",backgroundColor:o,color:u,opacity:g,transform:x.to(m=>`rotateY(${m}deg)`)},className:p("shadow-lg flex flex-col items-center justify-center gap-4 p-5",c),children:[t.image&&jsxRuntime.jsx("img",{className:"w-16 h-16 rounded",src:t.image,alt:t.title}),jsxRuntime.jsx("label",{className:"font-bold text-xl capitalize",children:t.title})]}),jsxRuntime.jsxs(web.animated.div,{style:{position:"absolute",width:"100%",height:"100%",backfaceVisibility:"hidden",backgroundColor:l,color:u,opacity:C,transform:x.to(m=>`rotateY(${m+180}deg)`)},className:p("shadow-lg flex flex-col p-5",c),children:[jsxRuntime.jsx("label",{className:"font-bold text-lg capitalize mb-2",children:t.title}),jsxRuntime.jsx("p",{className:"text-sm text-justify line-clamp-8 flex-1",children:t.description}),jsxRuntime.jsx("span",{className:"text-xs opacity-65 mt-2",children:"Click to flip back"})]})]})}function Ge({data:t,bgColor:o=ze,isRounded:u=false,tension:c=Ue,friction:d=$e}){let n=react.useMemo(()=>{try{return $__default.default(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),i=u?"rounded-2xl":"rounded-none";return jsxRuntime.jsx("div",{className:"grid grid-cols-2 gap-4 justify-items-center",children:t.map(b=>jsxRuntime.jsx(Be,{item:b,bgColor:o,textColor:n,cornerClass:i,tension:c,friction:d},b.title))})}exports.Card=oe;exports.CardAccordion=De;exports.CardCarousel=Ie;exports.CardFlip=Ge;exports.CardStack=fe;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/hooks/useMediaQuery.ts","../src/lib/utils/cn.ts","../src/lib/components/Card.tsx"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","mediaQuery","handleChange","event","cn","classes","DEFAULT_BG_COLOR","DEFAULT_TENSION","DEFAULT_FRICTION","MINI_SIZE","ACTIVE_SIZE","ACTIVE_SIZE_MOBILE","CARD_ALIGNMENT_CLASSES","Card","data","bgColor","disposition","isRounded","tension","friction","isMobile","activeCardRef","useRef","activeTitle","setActiveTitle","textColor","useMemo","chroma","getSize","useCallback","title","springs","api","useSprings","index","handleCardClick","dispositionClass","verticalCenter","cornerClass","jsxs","jsx","item","isActive","animated"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useState } from 'react'\n\n/**\n * Custom hook that listens to a CSS media query and returns whether it matches.\n * Replaces `react-responsive` with zero dependencies.\n *\n * @example\n * const isMobile = useMediaQuery(\"(max-width: 640px)\");\n */\nexport function useMediaQuery(query: string): boolean {\n    const [matches, setMatches] = useState<boolean>(() => {\n        if (typeof window === 'undefined') return false\n        return window.matchMedia(query).matches\n    })\n\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(query)\n\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches)\n        }\n\n        // Set initial value\n        setMatches(mediaQuery.matches)\n\n        mediaQuery.addEventListener('change', handleChange)\n        return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [query])\n\n    return matches\n}\n","/**\n * Utility for conditionally joining class names together.\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n    return classes.filter(Boolean).join(' ')\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useMediaQuery } from '../hooks/useMediaQuery'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardItem {\n    title: string\n    description: string\n    image?: string\n}\n\nexport interface CardProps {\n    /** Array of exactly 4 card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Layout disposition for the card grid */\n    disposition?: 'LeftRight' | 'RightLeft' | 'TopBottom' | 'BottomTop'\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension (higher = snappier) */\n    tension?: number\n    /** Spring animation friction (higher = more damped) */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 10\n\nconst MINI_SIZE = { width: '6rem', height: '6rem' }\nconst ACTIVE_SIZE = { width: '20rem', height: '20rem' }\nconst ACTIVE_SIZE_MOBILE = { width: '11rem', height: '11rem' }\n\nconst CARD_ALIGNMENT_CLASSES: Record<number, string> = {\n    0: 'flex justify-end items-end',\n    1: 'flex items-end',\n    2: 'flex justify-end',\n    3: 'flex'\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function Card({ data, bgColor = DEFAULT_BG_COLOR, disposition = 'LeftRight', isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: CardProps) {\n    const isMobile = useMediaQuery('(max-width: 640px)')\n    const activeCardRef = useRef<HTMLDivElement>(null)\n\n    const [activeTitle, setActiveTitle] = useState(data[0]?.title ?? '')\n\n    // Derive text color from background luminance\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    // Compute sizes for each card\n    const getSize = useCallback(\n        (title: string) => {\n            if (title === activeTitle) {\n                return isMobile ? ACTIVE_SIZE_MOBILE : ACTIVE_SIZE\n            }\n            return MINI_SIZE\n        },\n        [activeTitle, isMobile]\n    )\n\n    // Use react-spring's useSprings to avoid conditional hook calls\n    const [springs, api] = useSprings(data.length, (index) => ({\n        width: getSize(data[index].title).width,\n        height: getSize(data[index].title).height,\n        backgroundColor: bgColor,\n        config: { tension, friction }\n    }))\n\n    // Update springs when state changes\n    useEffect(() => {\n        api.start((index) => ({\n            width: getSize(data[index].title).width,\n            height: getSize(data[index].title).height,\n            backgroundColor: bgColor,\n            config: { tension, friction }\n        }))\n    }, [activeTitle, bgColor, tension, friction, isMobile, data, api, getSize])\n\n    const handleCardClick = useCallback((title: string) => {\n        setActiveTitle(title)\n    }, [])\n\n    // Disposition class mapping\n    const dispositionClass = useMemo(() => {\n        const verticalCenter = 'flex flex-col justify-center items-center gap-8 h-full'\n\n        switch (disposition) {\n            case 'LeftRight':\n                return isMobile ? verticalCenter : 'grid grid-cols-5 h-full'\n            case 'RightLeft':\n                return isMobile ? 'flex flex-col-reverse justify-center items-center gap-8 h-full' : 'grid grid-cols-5 h-full'\n            case 'TopBottom':\n                return verticalCenter\n            case 'BottomTop':\n                return 'flex flex-col-reverse justify-center items-center gap-8 h-full'\n            default:\n                return 'grid grid-cols-5 h-full'\n        }\n    }, [disposition, isMobile])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className={dispositionClass}>\n            {/* Main card grid */}\n            <div className={cn('col-span-3 flex justify-center items-center duration-100', disposition === 'LeftRight' ? 'order-1' : 'order-2')}>\n                <div className=\"grid grid-cols-2 gap-2\">\n                    {data.map((item, index) => {\n                        const isActive = activeTitle === item.title\n\n                        return (\n                            <div key={item.title} className={CARD_ALIGNMENT_CLASSES[index] ?? 'flex'}>\n                                <div style={{ color: textColor }}>\n                                    <animated.div\n                                        ref={isActive ? activeCardRef : undefined}\n                                        style={springs[index]}\n                                        onClick={() => handleCardClick(item.title)}\n                                        className={cn('cursor-pointer duration-100', cornerClass, isActive ? 'px-6 py-4' : 'flex justify-center items-center')}\n                                    >\n                                        <div className={isActive ? 'min-h-full' : 'max-sm:space-y-1 space-y-3'}>\n                                            <div className=\"flex max-sm:flex-col-reverse justify-between items-center\">\n                                                <label className={cn('capitalize font-bold duration-100', isActive ? 'max-sm:text-xl text-5xl' : 'max-sm:text-xs text-base')}>{item.title}</label>\n                                                {isActive && item.image && <img className=\"max-sm:w-12 max-sm:h-12 w-20 h-20\" src={item.image} alt={`${item.title} card`} />}\n                                            </div>\n                                            {isActive && <p className=\"line-clamp-[8] text-justify max-sm:text-xs\">{item.description}</p>}\n                                        </div>\n                                    </animated.div>\n                                </div>\n                            </div>\n                        )\n                    })}\n                </div>\n            </div>\n\n            {/* Mini card navigation */}\n            <div className={cn('col-span-2 gap-4 flex justify-center items-center duration-100', disposition === 'RightLeft' ? 'order-1' : 'order-2')}>\n                {data.map((item) => {\n                    const isActive = activeTitle === item.title\n\n                    return (\n                        <div\n                            key={item.title}\n                            onClick={() => handleCardClick(item.title)}\n                            className={cn(\n                                'bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center',\n                                'max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg',\n                                cornerClass,\n                                isActive ? 'scale-105 shadow-xl' : 'scale-90'\n                            )}\n                        >\n                            <label className=\"text-center text-xs capitalize\">{item.title}</label>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    )\n}\n"]}
+{"version":3,"sources":["../src/lib/hooks/useMediaQuery.ts","../src/lib/utils/cn.ts","../src/lib/components/Card.tsx","../src/lib/components/CardStack.tsx","../src/lib/components/CardCarousel.tsx","../src/lib/components/CardAccordion.tsx","../src/lib/components/CardFlip.tsx"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","mediaQuery","handleChange","event","cn","classes","DEFAULT_BG_COLOR","DEFAULT_TENSION","DEFAULT_FRICTION","MINI_SIZE","ACTIVE_SIZE","ACTIVE_SIZE_MOBILE","CARD_ALIGNMENT_CLASSES","Card","data","bgColor","disposition","isRounded","tension","friction","isMobile","activeCardRef","useRef","activeTitle","setActiveTitle","textColor","useMemo","chroma","getSize","useCallback","title","springs","api","useSprings","index","handleCardClick","dispositionClass","verticalCenter","cornerClass","jsxs","jsx","item","isActive","animated","CARD_WIDTH","CARD_HEIGHT","CardStack","activeIndex","setActiveIndex","getTransform","offset","direction","absOffset","i","t","handleClick","handlePrev","prev","handleNext","spring","x","CardCarousel","getProps","isCenter","p","zIndex","COLLAPSED_HEIGHT","EXPANDED_HEIGHT","CardAccordion","FlipCard","flipped","setFlipped","rotateY","frontOpacity","backOpacity","useSpring","handleFlip","backColor","e","r","CardFlip"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useState } from 'react'\n\n/**\n * Custom hook that listens to a CSS media query and returns whether it matches.\n * Replaces `react-responsive` with zero dependencies.\n *\n * @example\n * const isMobile = useMediaQuery(\"(max-width: 640px)\");\n */\nexport function useMediaQuery(query: string): boolean {\n    const [matches, setMatches] = useState<boolean>(() => {\n        if (typeof window === 'undefined') return false\n        return window.matchMedia(query).matches\n    })\n\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(query)\n\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches)\n        }\n\n        // Set initial value\n        setMatches(mediaQuery.matches)\n\n        mediaQuery.addEventListener('change', handleChange)\n        return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [query])\n\n    return matches\n}\n","/**\n * Utility for conditionally joining class names together.\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n    return classes.filter(Boolean).join(' ')\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useMediaQuery } from '../hooks/useMediaQuery'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardItem {\n    title: string\n    description: string\n    image?: string\n}\n\nexport interface CardProps {\n    /** Array of exactly 4 card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Layout disposition for the card grid */\n    disposition?: 'LeftRight' | 'RightLeft' | 'TopBottom' | 'BottomTop'\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension (higher = snappier) */\n    tension?: number\n    /** Spring animation friction (higher = more damped) */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 10\n\nconst MINI_SIZE = { width: '6rem', height: '6rem' }\nconst ACTIVE_SIZE = { width: '20rem', height: '20rem' }\nconst ACTIVE_SIZE_MOBILE = { width: '11rem', height: '11rem' }\n\nconst CARD_ALIGNMENT_CLASSES: Record<number, string> = {\n    0: 'flex justify-end items-end',\n    1: 'flex items-end',\n    2: 'flex justify-end',\n    3: 'flex'\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function Card({ data, bgColor = DEFAULT_BG_COLOR, disposition = 'LeftRight', isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardProps>) {\n    const isMobile = useMediaQuery('(max-width: 640px)')\n    const activeCardRef = useRef<HTMLDivElement>(null)\n\n    const [activeTitle, setActiveTitle] = useState(data[0]?.title ?? '')\n\n    // Derive text color from background luminance\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    // Compute sizes for each card\n    const getSize = useCallback(\n        (title: string) => {\n            if (title === activeTitle) {\n                return isMobile ? ACTIVE_SIZE_MOBILE : ACTIVE_SIZE\n            }\n            return MINI_SIZE\n        },\n        [activeTitle, isMobile]\n    )\n\n    // Use react-spring's useSprings to avoid conditional hook calls\n    const [springs, api] = useSprings(data.length, (index) => ({\n        width: getSize(data[index].title).width,\n        height: getSize(data[index].title).height,\n        backgroundColor: bgColor,\n        config: { tension, friction }\n    }))\n\n    // Update springs when state changes\n    useEffect(() => {\n        api.start((index) => ({\n            width: getSize(data[index].title).width,\n            height: getSize(data[index].title).height,\n            backgroundColor: bgColor,\n            config: { tension, friction }\n        }))\n    }, [activeTitle, bgColor, tension, friction, isMobile, data, api, getSize])\n\n    const handleCardClick = useCallback((title: string) => {\n        setActiveTitle(title)\n    }, [])\n\n    // Disposition class mapping\n    const dispositionClass = useMemo(() => {\n        const verticalCenter = 'flex flex-col justify-center items-center gap-8 h-full'\n\n        switch (disposition) {\n            case 'LeftRight':\n                return isMobile ? verticalCenter : 'grid grid-cols-5 h-full'\n            case 'RightLeft':\n                return isMobile ? 'flex flex-col-reverse justify-center items-center gap-8 h-full' : 'grid grid-cols-5 h-full'\n            case 'TopBottom':\n                return verticalCenter\n            case 'BottomTop':\n                return 'flex flex-col-reverse justify-center items-center gap-8 h-full'\n            default:\n                return 'grid grid-cols-5 h-full'\n        }\n    }, [disposition, isMobile])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className={dispositionClass}>\n            {/* Main card grid */}\n            <div className={cn('col-span-3 flex justify-center items-center duration-100', disposition === 'LeftRight' ? 'order-1' : 'order-2')}>\n                <div className=\"grid grid-cols-2 gap-2\">\n                    {data.map((item, index) => {\n                        const isActive = activeTitle === item.title\n\n                        return (\n                            <div key={item.title} className={CARD_ALIGNMENT_CLASSES[index] ?? 'flex'}>\n                                <div style={{ color: textColor }}>\n                                    <animated.div\n                                        ref={isActive ? activeCardRef : undefined}\n                                        style={springs[index]}\n                                        onClick={() => handleCardClick(item.title)}\n                                        className={cn('cursor-pointer duration-100', cornerClass, isActive ? 'px-6 py-4' : 'flex justify-center items-center')}\n                                    >\n                                        <div className={isActive ? 'min-h-full' : 'max-sm:space-y-1 space-y-3'}>\n                                            <div className=\"flex max-sm:flex-col-reverse justify-between items-center\">\n                                                <label className={cn('capitalize font-bold duration-100', isActive ? 'max-sm:text-xl text-5xl' : 'max-sm:text-xs text-base')}>{item.title}</label>\n                                                {isActive && item.image && <img className=\"max-sm:w-12 max-sm:h-12 w-20 h-20\" src={item.image} alt={`${item.title} card`} />}\n                                            </div>\n                                            {isActive && <p className=\"line-clamp-[8] text-justify max-sm:text-xs\">{item.description}</p>}\n                                        </div>\n                                    </animated.div>\n                                </div>\n                            </div>\n                        )\n                    })}\n                </div>\n            </div>\n\n            {/* Mini card navigation */}\n            <div className={cn('col-span-2 gap-4 flex justify-center items-center duration-100', disposition === 'RightLeft' ? 'order-1' : 'order-2')}>\n                {data.map((item) => {\n                    const isActive = activeTitle === item.title\n\n                    return (\n                        <div\n                            key={item.title}\n                            onClick={() => handleCardClick(item.title)}\n                            className={cn(\n                                'bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center',\n                                'max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg',\n                                cornerClass,\n                                isActive ? 'scale-105 shadow-xl' : 'scale-90'\n                            )}\n                        >\n                            <label className=\"text-center text-xs capitalize\">{item.title}</label>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardStackProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 14\n\nconst CARD_WIDTH = 280\nconst CARD_HEIGHT = 320\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardStack({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardStackProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const getTransform = useCallback(\n        (index: number) => {\n            const offset = index - activeIndex\n            if (offset === 0) {\n                return { x: 0, y: 0, scale: 1, rotate: 0, opacity: 1, zIndex: data.length }\n            }\n            const direction = offset > 0 ? 1 : -1\n            const absOffset = Math.abs(offset)\n            return {\n                x: direction * absOffset * 40,\n                y: -absOffset * 8,\n                scale: 1 - absOffset * 0.06,\n                rotate: direction * absOffset * 4,\n                opacity: Math.max(0.3, 1 - absOffset * 0.25),\n                zIndex: data.length - absOffset\n            }\n        },\n        [activeIndex, data.length]\n    )\n\n    const [springs, api] = useSprings(data.length, (i) => {\n        const t = getTransform(i)\n        return {\n            x: t.x,\n            y: t.y,\n            scale: t.scale,\n            rotate: t.rotate,\n            opacity: t.opacity,\n            config: { tension, friction }\n        }\n    })\n\n    useEffect(() => {\n        api.start((i) => {\n            const t = getTransform(i)\n            return {\n                x: t.x,\n                y: t.y,\n                scale: t.scale,\n                rotate: t.rotate,\n                opacity: t.opacity,\n                config: { tension, friction }\n            }\n        })\n    }, [activeIndex, bgColor, tension, friction, api, getTransform])\n\n    const handleClick = useCallback((index: number) => {\n        setActiveIndex(index)\n    }, [])\n\n    const handlePrev = useCallback(() => {\n        setActiveIndex((prev) => (prev > 0 ? prev - 1 : data.length - 1))\n    }, [data.length])\n\n    const handleNext = useCallback(() => {\n        setActiveIndex((prev) => (prev < data.length - 1 ? prev + 1 : 0))\n    }, [data.length])\n\n    return (\n        <div className=\"flex flex-col items-center gap-8\">\n            {/* Stack container */}\n            <div className=\"relative\" style={{ width: CARD_WIDTH, height: CARD_HEIGHT }}>\n                {data.map((item, index) => {\n                    const spring = springs[index]\n                    const isActive = index === activeIndex\n\n                    return (\n                        <animated.div\n                            key={item.title}\n                            onClick={() => handleClick(index)}\n                            style={{\n                                ...spring,\n                                backgroundColor: bgColor,\n                                color: textColor,\n                                position: 'absolute',\n                                width: CARD_WIDTH,\n                                height: CARD_HEIGHT,\n                                zIndex: getTransform(index).zIndex,\n                                transform: spring.x.to((x) => `translateX(${x}px) translateY(${spring.y.get()}px) rotate(${spring.rotate.get()}deg) scale(${spring.scale.get()})`),\n                                cursor: 'pointer'\n                            }}\n                            className={cn('shadow-lg px-6 py-4 duration-100', cornerClass)}\n                        >\n                            <div className=\"flex flex-col h-full\">\n                                <div className=\"flex justify-between items-center\">\n                                    <label className=\"font-bold text-2xl capitalize\">{item.title}</label>\n                                    {isActive && item.image && <img className=\"w-16 h-16 rounded\" src={item.image} alt={`${item.title}`} />}\n                                </div>\n                                {isActive && <p className=\"mt-3 text-sm text-justify line-clamp-[8]\">{item.description}</p>}\n                                {!isActive && (\n                                    <div className=\"flex-1 flex items-center justify-center\">\n                                        <span className=\"text-sm opacity-65\">{item.title}</span>\n                                    </div>\n                                )}\n                            </div>\n                        </animated.div>\n                    )\n                })}\n            </div>\n\n            {/* Navigation */}\n            <div className=\"flex gap-4 items-center\">\n                <button onClick={handlePrev} className=\"btn btn-sm btn-ghost\" aria-label=\"Previous card\">\n                    ←\n                </button>\n                {data.map((item, i) => (\n                    <button\n                        key={item.title}\n                        onClick={() => handleClick(i)}\n                        className={cn('w-2.5 h-2.5 rounded-full duration-200 cursor-pointer', i === activeIndex ? 'scale-125' : 'opacity-50')}\n                        style={{ backgroundColor: bgColor }}\n                        aria-label={`Go to ${item.title}`}\n                    />\n                ))}\n                <button onClick={handleNext} className=\"btn btn-sm btn-ghost\" aria-label=\"Next card\">\n                    →\n                </button>\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardCarouselProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 170\nconst DEFAULT_FRICTION = 26\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardCarousel({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardCarouselProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const getProps = useCallback(\n        (index: number) => {\n            const offset = index - activeIndex\n            const absOffset = Math.abs(offset)\n            const isCenter = offset === 0\n\n            return {\n                translateX: offset * 200,\n                scale: isCenter ? 1 : Math.max(0.7, 1 - absOffset * 0.15),\n                opacity: isCenter ? 1 : Math.max(0.4, 1 - absOffset * 0.3),\n                height: isCenter ? 300 : 220,\n                width: isCenter ? 300 : 200,\n                zIndex: data.length - absOffset\n            }\n        },\n        [activeIndex, data.length]\n    )\n\n    const [springs, api] = useSprings(data.length, (i) => {\n        const p = getProps(i)\n        return {\n            translateX: p.translateX,\n            scale: p.scale,\n            opacity: p.opacity,\n            height: p.height,\n            width: p.width,\n            config: { tension, friction }\n        }\n    })\n\n    useEffect(() => {\n        api.start((i) => {\n            const p = getProps(i)\n            return {\n                translateX: p.translateX,\n                scale: p.scale,\n                opacity: p.opacity,\n                height: p.height,\n                width: p.width,\n                config: { tension, friction }\n            }\n        })\n    }, [activeIndex, bgColor, tension, friction, api, getProps])\n\n    const handlePrev = useCallback(() => {\n        setActiveIndex((prev) => (prev > 0 ? prev - 1 : data.length - 1))\n    }, [data.length])\n\n    const handleNext = useCallback(() => {\n        setActiveIndex((prev) => (prev < data.length - 1 ? prev + 1 : 0))\n    }, [data.length])\n\n    return (\n        <div className=\"flex flex-col items-center gap-6\">\n            {/* Carousel track */}\n            <div className=\"relative flex items-center justify-center\" style={{ height: 320, width: '100%' }}>\n                {data.map((item, index) => {\n                    const spring = springs[index]\n                    const isActive = index === activeIndex\n                    const zIndex = getProps(index).zIndex\n\n                    return (\n                        <animated.div\n                            key={item.title}\n                            onClick={() => setActiveIndex(index)}\n                            style={{\n                                backgroundColor: bgColor,\n                                color: textColor,\n                                position: 'absolute',\n                                zIndex,\n                                width: spring.width,\n                                height: spring.height,\n                                opacity: spring.opacity,\n                                transform: spring.translateX.to((x) => `translateX(${x}px) scale(${spring.scale.get()})`),\n                                cursor: 'pointer'\n                            }}\n                            className={cn('shadow-lg overflow-hidden duration-100', cornerClass)}\n                        >\n                            <div className=\"p-5 flex flex-col h-full\">\n                                <div className=\"flex justify-between items-start\">\n                                    <label className={cn('font-bold capitalize duration-100', isActive ? 'text-2xl' : 'text-base')}>{item.title}</label>\n                                    {isActive && item.image && <img className=\"w-14 h-14 rounded\" src={item.image} alt={item.title} />}\n                                </div>\n                                {isActive && <p className=\"mt-3 text-sm text-justify line-clamp-[7] flex-1\">{item.description}</p>}\n                            </div>\n                        </animated.div>\n                    )\n                })}\n            </div>\n\n            {/* Navigation */}\n            <div className=\"flex gap-4 items-center\">\n                <button onClick={handlePrev} className=\"btn btn-sm btn-ghost\" aria-label=\"Previous\">\n                    ←\n                </button>\n                {data.map((item, i) => (\n                    <button\n                        key={item.title}\n                        onClick={() => setActiveIndex(i)}\n                        className={cn('w-2.5 h-2.5 rounded-full duration-200 cursor-pointer', i === activeIndex ? 'scale-125' : 'opacity-50')}\n                        style={{ backgroundColor: bgColor }}\n                        aria-label={`Go to ${item.title}`}\n                    />\n                ))}\n                <button onClick={handleNext} className=\"btn btn-sm btn-ghost\" aria-label=\"Next\">\n                    →\n                </button>\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardAccordionProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 180\nconst DEFAULT_FRICTION = 22\n\nconst COLLAPSED_HEIGHT = 56\nconst EXPANDED_HEIGHT = 280\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardAccordion({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardAccordionProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const [springs, api] = useSprings(data.length, (i) => ({\n        height: i === activeIndex ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,\n        opacity: i === activeIndex ? 1 : 0.7,\n        config: { tension, friction }\n    }))\n\n    useEffect(() => {\n        api.start((i) => ({\n            height: i === activeIndex ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,\n            opacity: i === activeIndex ? 1 : 0.7,\n            config: { tension, friction }\n        }))\n    }, [activeIndex, tension, friction, api])\n\n    const handleClick = useCallback((index: number) => {\n        setActiveIndex(index)\n    }, [])\n\n    return (\n        <div className=\"flex flex-col gap-2 w-full max-w-md mx-auto\">\n            {data.map((item, index) => {\n                const spring = springs[index]\n                const isActive = index === activeIndex\n\n                return (\n                    <animated.div\n                        key={item.title}\n                        onClick={() => handleClick(index)}\n                        style={{\n                            height: spring.height,\n                            opacity: spring.opacity,\n                            backgroundColor: bgColor,\n                            color: textColor,\n                            overflow: 'hidden',\n                            cursor: 'pointer'\n                        }}\n                        className={cn('shadow-lg px-5 duration-100', cornerClass)}\n                    >\n                        {/* Header bar */}\n                        <div className=\"flex items-center justify-between h-14\">\n                            <label className=\"font-bold text-lg capitalize\">{item.title}</label>\n                            <span className={cn('text-sm duration-200', isActive ? 'rotate-180' : 'rotate-0')}>▼</span>\n                        </div>\n\n                        {/* Expanded content */}\n                        {isActive && (\n                            <div className=\"pb-4\">\n                                <div className=\"flex gap-4 items-start\">\n                                    {item.image && <img className=\"w-20 h-20 rounded\" src={item.image} alt={item.title} />}\n                                    <p className=\"text-sm text-justify line-clamp-[8] flex-1\">{item.description}</p>\n                                </div>\n                            </div>\n                        )}\n                    </animated.div>\n                )\n            })}\n        </div>\n    )\n}\n","import { useSpring, animated } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardFlipProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 300\nconst DEFAULT_FRICTION = 30\n\n// ─── Single Flip Card ───────────────────────────────────────────────\n\nfunction FlipCard({\n    item,\n    bgColor,\n    textColor,\n    cornerClass,\n    tension,\n    friction\n}: Readonly<{\n    item: CardItem\n    bgColor: string\n    textColor: string\n    cornerClass: string\n    tension: number\n    friction: number\n}>) {\n    const [flipped, setFlipped] = useState(false)\n\n    const { rotateY, frontOpacity, backOpacity } = useSpring({\n        rotateY: flipped ? 180 : 0,\n        frontOpacity: flipped ? 0 : 1,\n        backOpacity: flipped ? 1 : 0,\n        config: { tension, friction }\n    })\n\n    const handleFlip = useCallback(() => {\n        setFlipped((prev) => !prev)\n    }, [])\n\n    const backColor = useMemo(() => {\n        try {\n            return chroma(bgColor).darken(0.5).hex()\n        } catch {\n            return bgColor\n        }\n    }, [bgColor])\n\n    return (\n        <div\n            role=\"button\"\n            tabIndex={0}\n            className=\"cursor-pointer\"\n            style={{ perspective: 800, width: 200, height: 240 }}\n            onClick={handleFlip}\n            onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') handleFlip()\n            }}\n        >\n            {/* Front face */}\n            <animated.div\n                style={{\n                    position: 'absolute',\n                    width: '100%',\n                    height: '100%',\n                    backfaceVisibility: 'hidden',\n                    backgroundColor: bgColor,\n                    color: textColor,\n                    opacity: frontOpacity,\n                    transform: rotateY.to((r) => `rotateY(${r}deg)`)\n                }}\n                className={cn('shadow-lg flex flex-col items-center justify-center gap-4 p-5', cornerClass)}\n            >\n                {item.image && <img className=\"w-16 h-16 rounded\" src={item.image} alt={item.title} />}\n                <label className=\"font-bold text-xl capitalize\">{item.title}</label>\n            </animated.div>\n\n            {/* Back face */}\n            <animated.div\n                style={{\n                    position: 'absolute',\n                    width: '100%',\n                    height: '100%',\n                    backfaceVisibility: 'hidden',\n                    backgroundColor: backColor,\n                    color: textColor,\n                    opacity: backOpacity,\n                    transform: rotateY.to((r) => `rotateY(${r + 180}deg)`)\n                }}\n                className={cn('shadow-lg flex flex-col p-5', cornerClass)}\n            >\n                <label className=\"font-bold text-lg capitalize mb-2\">{item.title}</label>\n                <p className=\"text-sm text-justify line-clamp-8 flex-1\">{item.description}</p>\n                <span className=\"text-xs opacity-65 mt-2\">Click to flip back</span>\n            </animated.div>\n        </div>\n    )\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardFlip({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardFlipProps>) {\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className=\"grid grid-cols-2 gap-4 justify-items-center\">\n            {data.map((item) => (\n                <FlipCard key={item.title} item={item} bgColor={bgColor} textColor={textColor} cornerClass={cornerClass} tension={tension} friction={friction} />\n            ))}\n        </div>\n    )\n}\n"]}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import {useSprings,animated}from'@react-spring/web';import j from'chroma-js';import {useRef,useState,useMemo,useCallback,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';function v(t){let[s,i]=useState(()=>typeof window>"u"?false:window.matchMedia(t).matches);return useEffect(()=>{let c=window.matchMedia(t),n=m=>{i(m.matches);};return i(c.matches),c.addEventListener("change",n),()=>c.removeEventListener("change",n)},[t]),s}function o(...t){return t.filter(Boolean).join(" ")}var k="#e5e7eb",B=120,D=10,O={width:"6rem",height:"6rem"},F={width:"20rem",height:"20rem"},Q={width:"11rem",height:"11rem"},z={0:"flex justify-end items-end",1:"flex items-end",2:"flex justify-end",3:"flex"};function P({data:t,bgColor:s=k,disposition:i="LeftRight",isRounded:c=false,tension:n=B,friction:m=D}){let l=v("(max-width: 640px)"),w=useRef(null),[d,N]=useState(t[0]?.title??""),b=useMemo(()=>{try{return j(s).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[s]),f=useCallback(e=>e===d?l?Q:F:O,[d,l]),[E,g]=useSprings(t.length,e=>({width:f(t[e].title).width,height:f(t[e].title).height,backgroundColor:s,config:{tension:n,friction:m}}));useEffect(()=>{g.start(e=>({width:f(t[e].title).width,height:f(t[e].title).height,backgroundColor:s,config:{tension:n,friction:m}}));},[d,s,n,m,l,t,g,f]);let p=useCallback(e=>{N(e);},[]),L=useMemo(()=>{let e="flex flex-col justify-center items-center gap-8 h-full";switch(i){case "LeftRight":return l?e:"grid grid-cols-5 h-full";case "RightLeft":return l?"flex flex-col-reverse justify-center items-center gap-8 h-full":"grid grid-cols-5 h-full";case "TopBottom":return e;case "BottomTop":return "flex flex-col-reverse justify-center items-center gap-8 h-full";default:return "grid grid-cols-5 h-full"}},[i,l]),x=c?"rounded-2xl":"rounded-none";return jsxs("div",{className:L,children:[jsx("div",{className:o("col-span-3 flex justify-center items-center duration-100",i==="LeftRight"?"order-1":"order-2"),children:jsx("div",{className:"grid grid-cols-2 gap-2",children:t.map((e,u)=>{let a=d===e.title;return jsx("div",{className:z[u]??"flex",children:jsx("div",{style:{color:b},children:jsx(animated.div,{ref:a?w:void 0,style:E[u],onClick:()=>p(e.title),className:o("cursor-pointer duration-100",x,a?"px-6 py-4":"flex justify-center items-center"),children:jsxs("div",{className:a?"min-h-full":"max-sm:space-y-1 space-y-3",children:[jsxs("div",{className:"flex max-sm:flex-col-reverse justify-between items-center",children:[jsx("label",{className:o("capitalize font-bold duration-100",a?"max-sm:text-xl text-5xl":"max-sm:text-xs text-base"),children:e.title}),a&&e.image&&jsx("img",{className:"max-sm:w-12 max-sm:h-12 w-20 h-20",src:e.image,alt:`${e.title} card`})]}),a&&jsx("p",{className:"line-clamp-[8] text-justify max-sm:text-xs",children:e.description})]})})})},e.title)})})}),jsx("div",{className:o("col-span-2 gap-4 flex justify-center items-center duration-100",i==="RightLeft"?"order-1":"order-2"),children:t.map(e=>{let u=d===e.title;return jsx("div",{onClick:()=>p(e.title),className:o("bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center","max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg",x,u?"scale-105 shadow-xl":"scale-90"),children:jsx("label",{className:"text-center text-xs capitalize",children:e.title})},e.title)})})]})}export{P as Card};//# sourceMappingURL=index.mjs.map
+import {useSprings,animated,useSpring}from'@react-spring/web';import $ from'chroma-js';import {useRef,useState,useMemo,useCallback,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';function F(t){let[o,u]=useState(()=>typeof window>"u"?false:window.matchMedia(t).matches);return useEffect(()=>{let c=window.matchMedia(t),d=n=>{u(n.matches);};return u(c.matches),c.addEventListener("change",d),()=>c.removeEventListener("change",d)},[t]),o}function p(...t){return t.filter(Boolean).join(" ")}var W="#e5e7eb",J=120,q=10,ee={width:"6rem",height:"6rem"},te={width:"20rem",height:"20rem"},re={width:"11rem",height:"11rem"},ae={0:"flex justify-end items-end",1:"flex items-end",2:"flex justify-end",3:"flex"};function oe({data:t,bgColor:o=W,disposition:u="LeftRight",isRounded:c=false,tension:d=J,friction:n=q}){let i=F("(max-width: 640px)"),b=useRef(null),[x,g]=useState(t[0]?.title??""),C=useMemo(()=>{try{return $(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),h=useCallback(r=>r===x?i?re:te:ee,[x,i]),[l,m]=useSprings(t.length,r=>({width:h(t[r].title).width,height:h(t[r].title).height,backgroundColor:o,config:{tension:d,friction:n}}));useEffect(()=>{m.start(r=>({width:h(t[r].title).width,height:h(t[r].title).height,backgroundColor:o,config:{tension:d,friction:n}}));},[x,o,d,n,i,t,m,h]);let s=useCallback(r=>{g(r);},[]),e=useMemo(()=>{let r="flex flex-col justify-center items-center gap-8 h-full";switch(u){case "LeftRight":return i?r:"grid grid-cols-5 h-full";case "RightLeft":return i?"flex flex-col-reverse justify-center items-center gap-8 h-full":"grid grid-cols-5 h-full";case "TopBottom":return r;case "BottomTop":return "flex flex-col-reverse justify-center items-center gap-8 h-full";default:return "grid grid-cols-5 h-full"}},[u,i]),a=c?"rounded-2xl":"rounded-none";return jsxs("div",{className:e,children:[jsx("div",{className:p("col-span-3 flex justify-center items-center duration-100",u==="LeftRight"?"order-1":"order-2"),children:jsx("div",{className:"grid grid-cols-2 gap-2",children:t.map((r,f)=>{let v=x===r.title;return jsx("div",{className:ae[f]??"flex",children:jsx("div",{style:{color:C},children:jsx(animated.div,{ref:v?b:void 0,style:l[f],onClick:()=>s(r.title),className:p("cursor-pointer duration-100",a,v?"px-6 py-4":"flex justify-center items-center"),children:jsxs("div",{className:v?"min-h-full":"max-sm:space-y-1 space-y-3",children:[jsxs("div",{className:"flex max-sm:flex-col-reverse justify-between items-center",children:[jsx("label",{className:p("capitalize font-bold duration-100",v?"max-sm:text-xl text-5xl":"max-sm:text-xs text-base"),children:r.title}),v&&r.image&&jsx("img",{className:"max-sm:w-12 max-sm:h-12 w-20 h-20",src:r.image,alt:`${r.title} card`})]}),v&&jsx("p",{className:"line-clamp-[8] text-justify max-sm:text-xs",children:r.description})]})})})},r.title)})})}),jsx("div",{className:p("col-span-2 gap-4 flex justify-center items-center duration-100",u==="RightLeft"?"order-1":"order-2"),children:t.map(r=>{let f=x===r.title;return jsx("div",{onClick:()=>s(r.title),className:p("bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center","max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg",a,f?"scale-105 shadow-xl":"scale-90"),children:jsx("label",{className:"text-center text-xs capitalize",children:r.title})},r.title)})})]})}var me="#e5e7eb",pe=120,ue=14,P=280,M=320;function fe({data:t,bgColor:o=me,isRounded:u=false,tension:c=pe,friction:d=ue}){let[n,i]=useState(0),b=useMemo(()=>{try{return $(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",g=useCallback(e=>{let a=e-n;if(a===0)return {x:0,y:0,scale:1,rotate:0,opacity:1,zIndex:t.length};let r=a>0?1:-1,f=Math.abs(a);return {x:r*f*40,y:-f*8,scale:1-f*.06,rotate:r*f*4,opacity:Math.max(.3,1-f*.25),zIndex:t.length-f}},[n,t.length]),[C,h]=useSprings(t.length,e=>{let a=g(e);return {x:a.x,y:a.y,scale:a.scale,rotate:a.rotate,opacity:a.opacity,config:{tension:c,friction:d}}});useEffect(()=>{h.start(e=>{let a=g(e);return {x:a.x,y:a.y,scale:a.scale,rotate:a.rotate,opacity:a.opacity,config:{tension:c,friction:d}}});},[n,o,c,d,h,g]);let l=useCallback(e=>{i(e);},[]),m=useCallback(()=>{i(e=>e>0?e-1:t.length-1);},[t.length]),s=useCallback(()=>{i(e=>e<t.length-1?e+1:0);},[t.length]);return jsxs("div",{className:"flex flex-col items-center gap-8",children:[jsx("div",{className:"relative",style:{width:P,height:M},children:t.map((e,a)=>{let r=C[a],f=a===n;return jsx(animated.div,{onClick:()=>l(a),style:{...r,backgroundColor:o,color:b,position:"absolute",width:P,height:M,zIndex:g(a).zIndex,transform:r.x.to(v=>`translateX(${v}px) translateY(${r.y.get()}px) rotate(${r.rotate.get()}deg) scale(${r.scale.get()})`),cursor:"pointer"},className:p("shadow-lg px-6 py-4 duration-100",x),children:jsxs("div",{className:"flex flex-col h-full",children:[jsxs("div",{className:"flex justify-between items-center",children:[jsx("label",{className:"font-bold text-2xl capitalize",children:e.title}),f&&e.image&&jsx("img",{className:"w-16 h-16 rounded",src:e.image,alt:`${e.title}`})]}),f&&jsx("p",{className:"mt-3 text-sm text-justify line-clamp-[8]",children:e.description}),!f&&jsx("div",{className:"flex-1 flex items-center justify-center",children:jsx("span",{className:"text-sm opacity-65",children:e.title})})]})},e.title)})}),jsxs("div",{className:"flex gap-4 items-center",children:[jsx("button",{onClick:m,className:"btn btn-sm btn-ghost","aria-label":"Previous card",children:"\u2190"}),t.map((e,a)=>jsx("button",{onClick:()=>l(a),className:p("w-2.5 h-2.5 rounded-full duration-200 cursor-pointer",a===n?"scale-125":"opacity-50"),style:{backgroundColor:o},"aria-label":`Go to ${e.title}`},e.title)),jsx("button",{onClick:s,className:"btn btn-sm btn-ghost","aria-label":"Next card",children:"\u2192"})]})]})}var ve="#e5e7eb",Ne=170,we=26;function Ie({data:t,bgColor:o=ve,isRounded:u=false,tension:c=Ne,friction:d=we}){let[n,i]=useState(0),b=useMemo(()=>{try{return $(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",g=useCallback(s=>{let e=s-n,a=Math.abs(e),r=e===0;return {translateX:e*200,scale:r?1:Math.max(.7,1-a*.15),opacity:r?1:Math.max(.4,1-a*.3),height:r?300:220,width:r?300:200,zIndex:t.length-a}},[n,t.length]),[C,h]=useSprings(t.length,s=>{let e=g(s);return {translateX:e.translateX,scale:e.scale,opacity:e.opacity,height:e.height,width:e.width,config:{tension:c,friction:d}}});useEffect(()=>{h.start(s=>{let e=g(s);return {translateX:e.translateX,scale:e.scale,opacity:e.opacity,height:e.height,width:e.width,config:{tension:c,friction:d}}});},[n,o,c,d,h,g]);let l=useCallback(()=>{i(s=>s>0?s-1:t.length-1);},[t.length]),m=useCallback(()=>{i(s=>s<t.length-1?s+1:0);},[t.length]);return jsxs("div",{className:"flex flex-col items-center gap-6",children:[jsx("div",{className:"relative flex items-center justify-center",style:{height:320,width:"100%"},children:t.map((s,e)=>{let a=C[e],r=e===n,f=g(e).zIndex;return jsx(animated.div,{onClick:()=>i(e),style:{backgroundColor:o,color:b,position:"absolute",zIndex:f,width:a.width,height:a.height,opacity:a.opacity,transform:a.translateX.to(v=>`translateX(${v}px) scale(${a.scale.get()})`),cursor:"pointer"},className:p("shadow-lg overflow-hidden duration-100",x),children:jsxs("div",{className:"p-5 flex flex-col h-full",children:[jsxs("div",{className:"flex justify-between items-start",children:[jsx("label",{className:p("font-bold capitalize duration-100",r?"text-2xl":"text-base"),children:s.title}),r&&s.image&&jsx("img",{className:"w-14 h-14 rounded",src:s.image,alt:s.title})]}),r&&jsx("p",{className:"mt-3 text-sm text-justify line-clamp-[7] flex-1",children:s.description})]})},s.title)})}),jsxs("div",{className:"flex gap-4 items-center",children:[jsx("button",{onClick:l,className:"btn btn-sm btn-ghost","aria-label":"Previous",children:"\u2190"}),t.map((s,e)=>jsx("button",{onClick:()=>i(e),className:p("w-2.5 h-2.5 rounded-full duration-200 cursor-pointer",e===n?"scale-125":"opacity-50"),style:{backgroundColor:o},"aria-label":`Go to ${s.title}`},s.title)),jsx("button",{onClick:m,className:"btn btn-sm btn-ghost","aria-label":"Next",children:"\u2192"})]})]})}var _e="#e5e7eb",Fe=180,Oe=22,j=56,z=280;function De({data:t,bgColor:o=_e,isRounded:u=false,tension:c=Fe,friction:d=Oe}){let[n,i]=useState(0),b=useMemo(()=>{try{return $(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),x=u?"rounded-2xl":"rounded-none",[g,C]=useSprings(t.length,l=>({height:l===n?z:j,opacity:l===n?1:.7,config:{tension:c,friction:d}}));useEffect(()=>{C.start(l=>({height:l===n?z:j,opacity:l===n?1:.7,config:{tension:c,friction:d}}));},[n,c,d,C]);let h=useCallback(l=>{i(l);},[]);return jsx("div",{className:"flex flex-col gap-2 w-full max-w-md mx-auto",children:t.map((l,m)=>{let s=g[m],e=m===n;return jsxs(animated.div,{onClick:()=>h(m),style:{height:s.height,opacity:s.opacity,backgroundColor:o,color:b,overflow:"hidden",cursor:"pointer"},className:p("shadow-lg px-5 duration-100",x),children:[jsxs("div",{className:"flex items-center justify-between h-14",children:[jsx("label",{className:"font-bold text-lg capitalize",children:l.title}),jsx("span",{className:p("text-sm duration-200",e?"rotate-180":"rotate-0"),children:"\u25BC"})]}),e&&jsx("div",{className:"pb-4",children:jsxs("div",{className:"flex gap-4 items-start",children:[l.image&&jsx("img",{className:"w-20 h-20 rounded",src:l.image,alt:l.title}),jsx("p",{className:"text-sm text-justify line-clamp-[8] flex-1",children:l.description})]})})]},l.title)})})}var ze="#e5e7eb",Ue=300,$e=30;function Be({item:t,bgColor:o,textColor:u,cornerClass:c,tension:d,friction:n}){let[i,b]=useState(false),{rotateY:x,frontOpacity:g,backOpacity:C}=useSpring({rotateY:i?180:0,frontOpacity:i?0:1,backOpacity:i?1:0,config:{tension:d,friction:n}}),h=useCallback(()=>{b(m=>!m);},[]),l=useMemo(()=>{try{return $(o).darken(.5).hex()}catch{return o}},[o]);return jsxs("div",{role:"button",tabIndex:0,className:"cursor-pointer",style:{perspective:800,width:200,height:240},onClick:h,onKeyDown:m=>{(m.key==="Enter"||m.key===" ")&&h();},children:[jsxs(animated.div,{style:{position:"absolute",width:"100%",height:"100%",backfaceVisibility:"hidden",backgroundColor:o,color:u,opacity:g,transform:x.to(m=>`rotateY(${m}deg)`)},className:p("shadow-lg flex flex-col items-center justify-center gap-4 p-5",c),children:[t.image&&jsx("img",{className:"w-16 h-16 rounded",src:t.image,alt:t.title}),jsx("label",{className:"font-bold text-xl capitalize",children:t.title})]}),jsxs(animated.div,{style:{position:"absolute",width:"100%",height:"100%",backfaceVisibility:"hidden",backgroundColor:l,color:u,opacity:C,transform:x.to(m=>`rotateY(${m+180}deg)`)},className:p("shadow-lg flex flex-col p-5",c),children:[jsx("label",{className:"font-bold text-lg capitalize mb-2",children:t.title}),jsx("p",{className:"text-sm text-justify line-clamp-8 flex-1",children:t.description}),jsx("span",{className:"text-xs opacity-65 mt-2",children:"Click to flip back"})]})]})}function Ge({data:t,bgColor:o=ze,isRounded:u=false,tension:c=Ue,friction:d=$e}){let n=useMemo(()=>{try{return $(o).luminance()<.5?"#e5e5e5":"#1c2531"}catch{return "#1c2531"}},[o]),i=u?"rounded-2xl":"rounded-none";return jsx("div",{className:"grid grid-cols-2 gap-4 justify-items-center",children:t.map(b=>jsx(Be,{item:b,bgColor:o,textColor:n,cornerClass:i,tension:c,friction:d},b.title))})}export{oe as Card,De as CardAccordion,Ie as CardCarousel,Ge as CardFlip,fe as CardStack};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/hooks/useMediaQuery.ts","../src/lib/utils/cn.ts","../src/lib/components/Card.tsx"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","mediaQuery","handleChange","event","cn","classes","DEFAULT_BG_COLOR","DEFAULT_TENSION","DEFAULT_FRICTION","MINI_SIZE","ACTIVE_SIZE","ACTIVE_SIZE_MOBILE","CARD_ALIGNMENT_CLASSES","Card","data","bgColor","disposition","isRounded","tension","friction","isMobile","activeCardRef","useRef","activeTitle","setActiveTitle","textColor","useMemo","chroma","getSize","useCallback","title","springs","api","useSprings","index","handleCardClick","dispositionClass","verticalCenter","cornerClass","jsxs","jsx","item","isActive","animated"],"mappings":"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","file":"index.mjs","sourcesContent":["import { useEffect, useState } from 'react'\n\n/**\n * Custom hook that listens to a CSS media query and returns whether it matches.\n * Replaces `react-responsive` with zero dependencies.\n *\n * @example\n * const isMobile = useMediaQuery(\"(max-width: 640px)\");\n */\nexport function useMediaQuery(query: string): boolean {\n    const [matches, setMatches] = useState<boolean>(() => {\n        if (typeof window === 'undefined') return false\n        return window.matchMedia(query).matches\n    })\n\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(query)\n\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches)\n        }\n\n        // Set initial value\n        setMatches(mediaQuery.matches)\n\n        mediaQuery.addEventListener('change', handleChange)\n        return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [query])\n\n    return matches\n}\n","/**\n * Utility for conditionally joining class names together.\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n    return classes.filter(Boolean).join(' ')\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useMediaQuery } from '../hooks/useMediaQuery'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardItem {\n    title: string\n    description: string\n    image?: string\n}\n\nexport interface CardProps {\n    /** Array of exactly 4 card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Layout disposition for the card grid */\n    disposition?: 'LeftRight' | 'RightLeft' | 'TopBottom' | 'BottomTop'\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension (higher = snappier) */\n    tension?: number\n    /** Spring animation friction (higher = more damped) */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 10\n\nconst MINI_SIZE = { width: '6rem', height: '6rem' }\nconst ACTIVE_SIZE = { width: '20rem', height: '20rem' }\nconst ACTIVE_SIZE_MOBILE = { width: '11rem', height: '11rem' }\n\nconst CARD_ALIGNMENT_CLASSES: Record<number, string> = {\n    0: 'flex justify-end items-end',\n    1: 'flex items-end',\n    2: 'flex justify-end',\n    3: 'flex'\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function Card({ data, bgColor = DEFAULT_BG_COLOR, disposition = 'LeftRight', isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: CardProps) {\n    const isMobile = useMediaQuery('(max-width: 640px)')\n    const activeCardRef = useRef<HTMLDivElement>(null)\n\n    const [activeTitle, setActiveTitle] = useState(data[0]?.title ?? '')\n\n    // Derive text color from background luminance\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    // Compute sizes for each card\n    const getSize = useCallback(\n        (title: string) => {\n            if (title === activeTitle) {\n                return isMobile ? ACTIVE_SIZE_MOBILE : ACTIVE_SIZE\n            }\n            return MINI_SIZE\n        },\n        [activeTitle, isMobile]\n    )\n\n    // Use react-spring's useSprings to avoid conditional hook calls\n    const [springs, api] = useSprings(data.length, (index) => ({\n        width: getSize(data[index].title).width,\n        height: getSize(data[index].title).height,\n        backgroundColor: bgColor,\n        config: { tension, friction }\n    }))\n\n    // Update springs when state changes\n    useEffect(() => {\n        api.start((index) => ({\n            width: getSize(data[index].title).width,\n            height: getSize(data[index].title).height,\n            backgroundColor: bgColor,\n            config: { tension, friction }\n        }))\n    }, [activeTitle, bgColor, tension, friction, isMobile, data, api, getSize])\n\n    const handleCardClick = useCallback((title: string) => {\n        setActiveTitle(title)\n    }, [])\n\n    // Disposition class mapping\n    const dispositionClass = useMemo(() => {\n        const verticalCenter = 'flex flex-col justify-center items-center gap-8 h-full'\n\n        switch (disposition) {\n            case 'LeftRight':\n                return isMobile ? verticalCenter : 'grid grid-cols-5 h-full'\n            case 'RightLeft':\n                return isMobile ? 'flex flex-col-reverse justify-center items-center gap-8 h-full' : 'grid grid-cols-5 h-full'\n            case 'TopBottom':\n                return verticalCenter\n            case 'BottomTop':\n                return 'flex flex-col-reverse justify-center items-center gap-8 h-full'\n            default:\n                return 'grid grid-cols-5 h-full'\n        }\n    }, [disposition, isMobile])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className={dispositionClass}>\n            {/* Main card grid */}\n            <div className={cn('col-span-3 flex justify-center items-center duration-100', disposition === 'LeftRight' ? 'order-1' : 'order-2')}>\n                <div className=\"grid grid-cols-2 gap-2\">\n                    {data.map((item, index) => {\n                        const isActive = activeTitle === item.title\n\n                        return (\n                            <div key={item.title} className={CARD_ALIGNMENT_CLASSES[index] ?? 'flex'}>\n                                <div style={{ color: textColor }}>\n                                    <animated.div\n                                        ref={isActive ? activeCardRef : undefined}\n                                        style={springs[index]}\n                                        onClick={() => handleCardClick(item.title)}\n                                        className={cn('cursor-pointer duration-100', cornerClass, isActive ? 'px-6 py-4' : 'flex justify-center items-center')}\n                                    >\n                                        <div className={isActive ? 'min-h-full' : 'max-sm:space-y-1 space-y-3'}>\n                                            <div className=\"flex max-sm:flex-col-reverse justify-between items-center\">\n                                                <label className={cn('capitalize font-bold duration-100', isActive ? 'max-sm:text-xl text-5xl' : 'max-sm:text-xs text-base')}>{item.title}</label>\n                                                {isActive && item.image && <img className=\"max-sm:w-12 max-sm:h-12 w-20 h-20\" src={item.image} alt={`${item.title} card`} />}\n                                            </div>\n                                            {isActive && <p className=\"line-clamp-[8] text-justify max-sm:text-xs\">{item.description}</p>}\n                                        </div>\n                                    </animated.div>\n                                </div>\n                            </div>\n                        )\n                    })}\n                </div>\n            </div>\n\n            {/* Mini card navigation */}\n            <div className={cn('col-span-2 gap-4 flex justify-center items-center duration-100', disposition === 'RightLeft' ? 'order-1' : 'order-2')}>\n                {data.map((item) => {\n                    const isActive = activeTitle === item.title\n\n                    return (\n                        <div\n                            key={item.title}\n                            onClick={() => handleCardClick(item.title)}\n                            className={cn(\n                                'bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center',\n                                'max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg',\n                                cornerClass,\n                                isActive ? 'scale-105 shadow-xl' : 'scale-90'\n                            )}\n                        >\n                            <label className=\"text-center text-xs capitalize\">{item.title}</label>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    )\n}\n"]}
+{"version":3,"sources":["../src/lib/hooks/useMediaQuery.ts","../src/lib/utils/cn.ts","../src/lib/components/Card.tsx","../src/lib/components/CardStack.tsx","../src/lib/components/CardCarousel.tsx","../src/lib/components/CardAccordion.tsx","../src/lib/components/CardFlip.tsx"],"names":["useMediaQuery","query","matches","setMatches","useState","useEffect","mediaQuery","handleChange","event","cn","classes","DEFAULT_BG_COLOR","DEFAULT_TENSION","DEFAULT_FRICTION","MINI_SIZE","ACTIVE_SIZE","ACTIVE_SIZE_MOBILE","CARD_ALIGNMENT_CLASSES","Card","data","bgColor","disposition","isRounded","tension","friction","isMobile","activeCardRef","useRef","activeTitle","setActiveTitle","textColor","useMemo","chroma","getSize","useCallback","title","springs","api","useSprings","index","handleCardClick","dispositionClass","verticalCenter","cornerClass","jsxs","jsx","item","isActive","animated","CARD_WIDTH","CARD_HEIGHT","CardStack","activeIndex","setActiveIndex","getTransform","offset","direction","absOffset","i","t","handleClick","handlePrev","prev","handleNext","spring","x","CardCarousel","getProps","isCenter","p","zIndex","COLLAPSED_HEIGHT","EXPANDED_HEIGHT","CardAccordion","FlipCard","flipped","setFlipped","rotateY","frontOpacity","backOpacity","useSpring","handleFlip","backColor","e","r","CardFlip"],"mappings":"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","file":"index.mjs","sourcesContent":["import { useEffect, useState } from 'react'\n\n/**\n * Custom hook that listens to a CSS media query and returns whether it matches.\n * Replaces `react-responsive` with zero dependencies.\n *\n * @example\n * const isMobile = useMediaQuery(\"(max-width: 640px)\");\n */\nexport function useMediaQuery(query: string): boolean {\n    const [matches, setMatches] = useState<boolean>(() => {\n        if (typeof window === 'undefined') return false\n        return window.matchMedia(query).matches\n    })\n\n    useEffect(() => {\n        const mediaQuery = window.matchMedia(query)\n\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches)\n        }\n\n        // Set initial value\n        setMatches(mediaQuery.matches)\n\n        mediaQuery.addEventListener('change', handleChange)\n        return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [query])\n\n    return matches\n}\n","/**\n * Utility for conditionally joining class names together.\n */\nexport function cn(...classes: (string | boolean | undefined | null)[]): string {\n    return classes.filter(Boolean).join(' ')\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useMediaQuery } from '../hooks/useMediaQuery'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardItem {\n    title: string\n    description: string\n    image?: string\n}\n\nexport interface CardProps {\n    /** Array of exactly 4 card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Layout disposition for the card grid */\n    disposition?: 'LeftRight' | 'RightLeft' | 'TopBottom' | 'BottomTop'\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension (higher = snappier) */\n    tension?: number\n    /** Spring animation friction (higher = more damped) */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 10\n\nconst MINI_SIZE = { width: '6rem', height: '6rem' }\nconst ACTIVE_SIZE = { width: '20rem', height: '20rem' }\nconst ACTIVE_SIZE_MOBILE = { width: '11rem', height: '11rem' }\n\nconst CARD_ALIGNMENT_CLASSES: Record<number, string> = {\n    0: 'flex justify-end items-end',\n    1: 'flex items-end',\n    2: 'flex justify-end',\n    3: 'flex'\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function Card({ data, bgColor = DEFAULT_BG_COLOR, disposition = 'LeftRight', isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardProps>) {\n    const isMobile = useMediaQuery('(max-width: 640px)')\n    const activeCardRef = useRef<HTMLDivElement>(null)\n\n    const [activeTitle, setActiveTitle] = useState(data[0]?.title ?? '')\n\n    // Derive text color from background luminance\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    // Compute sizes for each card\n    const getSize = useCallback(\n        (title: string) => {\n            if (title === activeTitle) {\n                return isMobile ? ACTIVE_SIZE_MOBILE : ACTIVE_SIZE\n            }\n            return MINI_SIZE\n        },\n        [activeTitle, isMobile]\n    )\n\n    // Use react-spring's useSprings to avoid conditional hook calls\n    const [springs, api] = useSprings(data.length, (index) => ({\n        width: getSize(data[index].title).width,\n        height: getSize(data[index].title).height,\n        backgroundColor: bgColor,\n        config: { tension, friction }\n    }))\n\n    // Update springs when state changes\n    useEffect(() => {\n        api.start((index) => ({\n            width: getSize(data[index].title).width,\n            height: getSize(data[index].title).height,\n            backgroundColor: bgColor,\n            config: { tension, friction }\n        }))\n    }, [activeTitle, bgColor, tension, friction, isMobile, data, api, getSize])\n\n    const handleCardClick = useCallback((title: string) => {\n        setActiveTitle(title)\n    }, [])\n\n    // Disposition class mapping\n    const dispositionClass = useMemo(() => {\n        const verticalCenter = 'flex flex-col justify-center items-center gap-8 h-full'\n\n        switch (disposition) {\n            case 'LeftRight':\n                return isMobile ? verticalCenter : 'grid grid-cols-5 h-full'\n            case 'RightLeft':\n                return isMobile ? 'flex flex-col-reverse justify-center items-center gap-8 h-full' : 'grid grid-cols-5 h-full'\n            case 'TopBottom':\n                return verticalCenter\n            case 'BottomTop':\n                return 'flex flex-col-reverse justify-center items-center gap-8 h-full'\n            default:\n                return 'grid grid-cols-5 h-full'\n        }\n    }, [disposition, isMobile])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className={dispositionClass}>\n            {/* Main card grid */}\n            <div className={cn('col-span-3 flex justify-center items-center duration-100', disposition === 'LeftRight' ? 'order-1' : 'order-2')}>\n                <div className=\"grid grid-cols-2 gap-2\">\n                    {data.map((item, index) => {\n                        const isActive = activeTitle === item.title\n\n                        return (\n                            <div key={item.title} className={CARD_ALIGNMENT_CLASSES[index] ?? 'flex'}>\n                                <div style={{ color: textColor }}>\n                                    <animated.div\n                                        ref={isActive ? activeCardRef : undefined}\n                                        style={springs[index]}\n                                        onClick={() => handleCardClick(item.title)}\n                                        className={cn('cursor-pointer duration-100', cornerClass, isActive ? 'px-6 py-4' : 'flex justify-center items-center')}\n                                    >\n                                        <div className={isActive ? 'min-h-full' : 'max-sm:space-y-1 space-y-3'}>\n                                            <div className=\"flex max-sm:flex-col-reverse justify-between items-center\">\n                                                <label className={cn('capitalize font-bold duration-100', isActive ? 'max-sm:text-xl text-5xl' : 'max-sm:text-xs text-base')}>{item.title}</label>\n                                                {isActive && item.image && <img className=\"max-sm:w-12 max-sm:h-12 w-20 h-20\" src={item.image} alt={`${item.title} card`} />}\n                                            </div>\n                                            {isActive && <p className=\"line-clamp-[8] text-justify max-sm:text-xs\">{item.description}</p>}\n                                        </div>\n                                    </animated.div>\n                                </div>\n                            </div>\n                        )\n                    })}\n                </div>\n            </div>\n\n            {/* Mini card navigation */}\n            <div className={cn('col-span-2 gap-4 flex justify-center items-center duration-100', disposition === 'RightLeft' ? 'order-1' : 'order-2')}>\n                {data.map((item) => {\n                    const isActive = activeTitle === item.title\n\n                    return (\n                        <div\n                            key={item.title}\n                            onClick={() => handleCardClick(item.title)}\n                            className={cn(\n                                'bg-base-100 hover:scale-125 duration-200 cursor-pointer flex justify-center items-center',\n                                'max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg',\n                                cornerClass,\n                                isActive ? 'scale-105 shadow-xl' : 'scale-90'\n                            )}\n                        >\n                            <label className=\"text-center text-xs capitalize\">{item.title}</label>\n                        </div>\n                    )\n                })}\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardStackProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 120\nconst DEFAULT_FRICTION = 14\n\nconst CARD_WIDTH = 280\nconst CARD_HEIGHT = 320\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardStack({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardStackProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const getTransform = useCallback(\n        (index: number) => {\n            const offset = index - activeIndex\n            if (offset === 0) {\n                return { x: 0, y: 0, scale: 1, rotate: 0, opacity: 1, zIndex: data.length }\n            }\n            const direction = offset > 0 ? 1 : -1\n            const absOffset = Math.abs(offset)\n            return {\n                x: direction * absOffset * 40,\n                y: -absOffset * 8,\n                scale: 1 - absOffset * 0.06,\n                rotate: direction * absOffset * 4,\n                opacity: Math.max(0.3, 1 - absOffset * 0.25),\n                zIndex: data.length - absOffset\n            }\n        },\n        [activeIndex, data.length]\n    )\n\n    const [springs, api] = useSprings(data.length, (i) => {\n        const t = getTransform(i)\n        return {\n            x: t.x,\n            y: t.y,\n            scale: t.scale,\n            rotate: t.rotate,\n            opacity: t.opacity,\n            config: { tension, friction }\n        }\n    })\n\n    useEffect(() => {\n        api.start((i) => {\n            const t = getTransform(i)\n            return {\n                x: t.x,\n                y: t.y,\n                scale: t.scale,\n                rotate: t.rotate,\n                opacity: t.opacity,\n                config: { tension, friction }\n            }\n        })\n    }, [activeIndex, bgColor, tension, friction, api, getTransform])\n\n    const handleClick = useCallback((index: number) => {\n        setActiveIndex(index)\n    }, [])\n\n    const handlePrev = useCallback(() => {\n        setActiveIndex((prev) => (prev > 0 ? prev - 1 : data.length - 1))\n    }, [data.length])\n\n    const handleNext = useCallback(() => {\n        setActiveIndex((prev) => (prev < data.length - 1 ? prev + 1 : 0))\n    }, [data.length])\n\n    return (\n        <div className=\"flex flex-col items-center gap-8\">\n            {/* Stack container */}\n            <div className=\"relative\" style={{ width: CARD_WIDTH, height: CARD_HEIGHT }}>\n                {data.map((item, index) => {\n                    const spring = springs[index]\n                    const isActive = index === activeIndex\n\n                    return (\n                        <animated.div\n                            key={item.title}\n                            onClick={() => handleClick(index)}\n                            style={{\n                                ...spring,\n                                backgroundColor: bgColor,\n                                color: textColor,\n                                position: 'absolute',\n                                width: CARD_WIDTH,\n                                height: CARD_HEIGHT,\n                                zIndex: getTransform(index).zIndex,\n                                transform: spring.x.to((x) => `translateX(${x}px) translateY(${spring.y.get()}px) rotate(${spring.rotate.get()}deg) scale(${spring.scale.get()})`),\n                                cursor: 'pointer'\n                            }}\n                            className={cn('shadow-lg px-6 py-4 duration-100', cornerClass)}\n                        >\n                            <div className=\"flex flex-col h-full\">\n                                <div className=\"flex justify-between items-center\">\n                                    <label className=\"font-bold text-2xl capitalize\">{item.title}</label>\n                                    {isActive && item.image && <img className=\"w-16 h-16 rounded\" src={item.image} alt={`${item.title}`} />}\n                                </div>\n                                {isActive && <p className=\"mt-3 text-sm text-justify line-clamp-[8]\">{item.description}</p>}\n                                {!isActive && (\n                                    <div className=\"flex-1 flex items-center justify-center\">\n                                        <span className=\"text-sm opacity-65\">{item.title}</span>\n                                    </div>\n                                )}\n                            </div>\n                        </animated.div>\n                    )\n                })}\n            </div>\n\n            {/* Navigation */}\n            <div className=\"flex gap-4 items-center\">\n                <button onClick={handlePrev} className=\"btn btn-sm btn-ghost\" aria-label=\"Previous card\">\n                    ←\n                </button>\n                {data.map((item, i) => (\n                    <button\n                        key={item.title}\n                        onClick={() => handleClick(i)}\n                        className={cn('w-2.5 h-2.5 rounded-full duration-200 cursor-pointer', i === activeIndex ? 'scale-125' : 'opacity-50')}\n                        style={{ backgroundColor: bgColor }}\n                        aria-label={`Go to ${item.title}`}\n                    />\n                ))}\n                <button onClick={handleNext} className=\"btn btn-sm btn-ghost\" aria-label=\"Next card\">\n                    →\n                </button>\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardCarouselProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 170\nconst DEFAULT_FRICTION = 26\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardCarousel({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardCarouselProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const getProps = useCallback(\n        (index: number) => {\n            const offset = index - activeIndex\n            const absOffset = Math.abs(offset)\n            const isCenter = offset === 0\n\n            return {\n                translateX: offset * 200,\n                scale: isCenter ? 1 : Math.max(0.7, 1 - absOffset * 0.15),\n                opacity: isCenter ? 1 : Math.max(0.4, 1 - absOffset * 0.3),\n                height: isCenter ? 300 : 220,\n                width: isCenter ? 300 : 200,\n                zIndex: data.length - absOffset\n            }\n        },\n        [activeIndex, data.length]\n    )\n\n    const [springs, api] = useSprings(data.length, (i) => {\n        const p = getProps(i)\n        return {\n            translateX: p.translateX,\n            scale: p.scale,\n            opacity: p.opacity,\n            height: p.height,\n            width: p.width,\n            config: { tension, friction }\n        }\n    })\n\n    useEffect(() => {\n        api.start((i) => {\n            const p = getProps(i)\n            return {\n                translateX: p.translateX,\n                scale: p.scale,\n                opacity: p.opacity,\n                height: p.height,\n                width: p.width,\n                config: { tension, friction }\n            }\n        })\n    }, [activeIndex, bgColor, tension, friction, api, getProps])\n\n    const handlePrev = useCallback(() => {\n        setActiveIndex((prev) => (prev > 0 ? prev - 1 : data.length - 1))\n    }, [data.length])\n\n    const handleNext = useCallback(() => {\n        setActiveIndex((prev) => (prev < data.length - 1 ? prev + 1 : 0))\n    }, [data.length])\n\n    return (\n        <div className=\"flex flex-col items-center gap-6\">\n            {/* Carousel track */}\n            <div className=\"relative flex items-center justify-center\" style={{ height: 320, width: '100%' }}>\n                {data.map((item, index) => {\n                    const spring = springs[index]\n                    const isActive = index === activeIndex\n                    const zIndex = getProps(index).zIndex\n\n                    return (\n                        <animated.div\n                            key={item.title}\n                            onClick={() => setActiveIndex(index)}\n                            style={{\n                                backgroundColor: bgColor,\n                                color: textColor,\n                                position: 'absolute',\n                                zIndex,\n                                width: spring.width,\n                                height: spring.height,\n                                opacity: spring.opacity,\n                                transform: spring.translateX.to((x) => `translateX(${x}px) scale(${spring.scale.get()})`),\n                                cursor: 'pointer'\n                            }}\n                            className={cn('shadow-lg overflow-hidden duration-100', cornerClass)}\n                        >\n                            <div className=\"p-5 flex flex-col h-full\">\n                                <div className=\"flex justify-between items-start\">\n                                    <label className={cn('font-bold capitalize duration-100', isActive ? 'text-2xl' : 'text-base')}>{item.title}</label>\n                                    {isActive && item.image && <img className=\"w-14 h-14 rounded\" src={item.image} alt={item.title} />}\n                                </div>\n                                {isActive && <p className=\"mt-3 text-sm text-justify line-clamp-[7] flex-1\">{item.description}</p>}\n                            </div>\n                        </animated.div>\n                    )\n                })}\n            </div>\n\n            {/* Navigation */}\n            <div className=\"flex gap-4 items-center\">\n                <button onClick={handlePrev} className=\"btn btn-sm btn-ghost\" aria-label=\"Previous\">\n                    ←\n                </button>\n                {data.map((item, i) => (\n                    <button\n                        key={item.title}\n                        onClick={() => setActiveIndex(i)}\n                        className={cn('w-2.5 h-2.5 rounded-full duration-200 cursor-pointer', i === activeIndex ? 'scale-125' : 'opacity-50')}\n                        style={{ backgroundColor: bgColor }}\n                        aria-label={`Go to ${item.title}`}\n                    />\n                ))}\n                <button onClick={handleNext} className=\"btn btn-sm btn-ghost\" aria-label=\"Next\">\n                    →\n                </button>\n            </div>\n        </div>\n    )\n}\n","import { animated, useSprings } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardAccordionProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 180\nconst DEFAULT_FRICTION = 22\n\nconst COLLAPSED_HEIGHT = 56\nconst EXPANDED_HEIGHT = 280\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardAccordion({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardAccordionProps>) {\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    const [springs, api] = useSprings(data.length, (i) => ({\n        height: i === activeIndex ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,\n        opacity: i === activeIndex ? 1 : 0.7,\n        config: { tension, friction }\n    }))\n\n    useEffect(() => {\n        api.start((i) => ({\n            height: i === activeIndex ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,\n            opacity: i === activeIndex ? 1 : 0.7,\n            config: { tension, friction }\n        }))\n    }, [activeIndex, tension, friction, api])\n\n    const handleClick = useCallback((index: number) => {\n        setActiveIndex(index)\n    }, [])\n\n    return (\n        <div className=\"flex flex-col gap-2 w-full max-w-md mx-auto\">\n            {data.map((item, index) => {\n                const spring = springs[index]\n                const isActive = index === activeIndex\n\n                return (\n                    <animated.div\n                        key={item.title}\n                        onClick={() => handleClick(index)}\n                        style={{\n                            height: spring.height,\n                            opacity: spring.opacity,\n                            backgroundColor: bgColor,\n                            color: textColor,\n                            overflow: 'hidden',\n                            cursor: 'pointer'\n                        }}\n                        className={cn('shadow-lg px-5 duration-100', cornerClass)}\n                    >\n                        {/* Header bar */}\n                        <div className=\"flex items-center justify-between h-14\">\n                            <label className=\"font-bold text-lg capitalize\">{item.title}</label>\n                            <span className={cn('text-sm duration-200', isActive ? 'rotate-180' : 'rotate-0')}>▼</span>\n                        </div>\n\n                        {/* Expanded content */}\n                        {isActive && (\n                            <div className=\"pb-4\">\n                                <div className=\"flex gap-4 items-start\">\n                                    {item.image && <img className=\"w-20 h-20 rounded\" src={item.image} alt={item.title} />}\n                                    <p className=\"text-sm text-justify line-clamp-[8] flex-1\">{item.description}</p>\n                                </div>\n                            </div>\n                        )}\n                    </animated.div>\n                )\n            })}\n        </div>\n    )\n}\n","import { useSpring, animated } from '@react-spring/web'\nimport chroma from 'chroma-js'\nimport { useCallback, useMemo, useState } from 'react'\nimport type { CardItem } from './Card'\nimport { cn } from '../utils/cn'\n\n// ─── Types ──────────────────────────────────────────────────────────\n\nexport interface CardFlipProps {\n    /** Array of card items to display */\n    data: CardItem[]\n    /** Background color of the cards (hex string) */\n    bgColor?: string\n    /** Whether cards have rounded corners */\n    isRounded?: boolean\n    /** Spring animation tension */\n    tension?: number\n    /** Spring animation friction */\n    friction?: number\n}\n\n// ─── Constants ──────────────────────────────────────────────────────\n\nconst DEFAULT_BG_COLOR = '#e5e7eb'\nconst DEFAULT_TENSION = 300\nconst DEFAULT_FRICTION = 30\n\n// ─── Single Flip Card ───────────────────────────────────────────────\n\nfunction FlipCard({\n    item,\n    bgColor,\n    textColor,\n    cornerClass,\n    tension,\n    friction\n}: Readonly<{\n    item: CardItem\n    bgColor: string\n    textColor: string\n    cornerClass: string\n    tension: number\n    friction: number\n}>) {\n    const [flipped, setFlipped] = useState(false)\n\n    const { rotateY, frontOpacity, backOpacity } = useSpring({\n        rotateY: flipped ? 180 : 0,\n        frontOpacity: flipped ? 0 : 1,\n        backOpacity: flipped ? 1 : 0,\n        config: { tension, friction }\n    })\n\n    const handleFlip = useCallback(() => {\n        setFlipped((prev) => !prev)\n    }, [])\n\n    const backColor = useMemo(() => {\n        try {\n            return chroma(bgColor).darken(0.5).hex()\n        } catch {\n            return bgColor\n        }\n    }, [bgColor])\n\n    return (\n        <div\n            role=\"button\"\n            tabIndex={0}\n            className=\"cursor-pointer\"\n            style={{ perspective: 800, width: 200, height: 240 }}\n            onClick={handleFlip}\n            onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') handleFlip()\n            }}\n        >\n            {/* Front face */}\n            <animated.div\n                style={{\n                    position: 'absolute',\n                    width: '100%',\n                    height: '100%',\n                    backfaceVisibility: 'hidden',\n                    backgroundColor: bgColor,\n                    color: textColor,\n                    opacity: frontOpacity,\n                    transform: rotateY.to((r) => `rotateY(${r}deg)`)\n                }}\n                className={cn('shadow-lg flex flex-col items-center justify-center gap-4 p-5', cornerClass)}\n            >\n                {item.image && <img className=\"w-16 h-16 rounded\" src={item.image} alt={item.title} />}\n                <label className=\"font-bold text-xl capitalize\">{item.title}</label>\n            </animated.div>\n\n            {/* Back face */}\n            <animated.div\n                style={{\n                    position: 'absolute',\n                    width: '100%',\n                    height: '100%',\n                    backfaceVisibility: 'hidden',\n                    backgroundColor: backColor,\n                    color: textColor,\n                    opacity: backOpacity,\n                    transform: rotateY.to((r) => `rotateY(${r + 180}deg)`)\n                }}\n                className={cn('shadow-lg flex flex-col p-5', cornerClass)}\n            >\n                <label className=\"font-bold text-lg capitalize mb-2\">{item.title}</label>\n                <p className=\"text-sm text-justify line-clamp-8 flex-1\">{item.description}</p>\n                <span className=\"text-xs opacity-65 mt-2\">Click to flip back</span>\n            </animated.div>\n        </div>\n    )\n}\n\n// ─── Component ──────────────────────────────────────────────────────\n\nexport function CardFlip({ data, bgColor = DEFAULT_BG_COLOR, isRounded = false, tension = DEFAULT_TENSION, friction = DEFAULT_FRICTION }: Readonly<CardFlipProps>) {\n    const textColor = useMemo(() => {\n        try {\n            return chroma(bgColor).luminance() < 0.5 ? '#e5e5e5' : '#1c2531'\n        } catch {\n            return '#1c2531'\n        }\n    }, [bgColor])\n\n    const cornerClass = isRounded ? 'rounded-2xl' : 'rounded-none'\n\n    return (\n        <div className=\"grid grid-cols-2 gap-4 justify-items-center\">\n            {data.map((item) => (\n                <FlipCard key={item.title} item={item} bgColor={bgColor} textColor={textColor} cornerClass={cornerClass} tension={tension} friction={friction} />\n            ))}\n        </div>\n    )\n}\n"]}

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-emerald-500:oklch(69.6% .17 162.48);--color-cyan-500:oklch(71.5% .143 215.221);--color-blue-500:oklch(62.3% .214 259.815);--color-purple-500:oklch(62.7% .265 303.9);--color-pink-500:oklch(65.6% .241 354.308);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-5xl:3rem;--text-5xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-bold:700;--tracking-tight:-.025em;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--blur-3xl:64px;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-32{top:calc(var(--spacing) * -32)}.top-2{top:calc(var(--spacing) * 2)}.-right-32{right:calc(var(--spacing) * -32)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-32{bottom:calc(var(--spacing) * -32)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-\[17\%\]{bottom:17%}.-left-32{left:calc(var(--spacing) * -32)}.-left-\[4\%\]{left:-4%}.z-10{z-index:10}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.line-clamp-8{-webkit-line-clamp:8;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-\[7\]{-webkit-line-clamp:7;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-\[8\]{-webkit-line-clamp:8;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-8{height:calc(var(--spacing) * 8)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-96{height:calc(var(--spacing) * 96)}.h-\[5rem\]{height:5rem}.h-full{height:100%}.min-h-\[90vh\]{min-height:90vh}.min-h-\[450px\]{min-height:450px}.min-h-full{min-height:100%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-96{width:calc(var(--spacing) * 96)}.w-\[5rem\]{width:5rem}.w-full{width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-125{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}.-rotate-90{rotate:-90deg}.rotate-0{rotate:none}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\[slideIn_0\.3s_ease-out\]{animation:.3s ease-out slideIn}.animate-bounce{animation:var(--animate-bounce)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.scroll-mt-8{scroll-margin-top:calc(var(--spacing) * 8)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-12{gap:calc(var(--spacing) * 12)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-none{border-radius:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-cyan-500\/20{--tw-gradient-from:#00b7d733}@supports (color:color-mix(in lab, red, red)){.from-cyan-500\/20{--tw-gradient-from:color-mix(in oklab, var(--color-cyan-500) 20%, transparent)}}.from-cyan-500\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-purple-500\/20{--tw-gradient-from:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.from-purple-500\/20{--tw-gradient-from:color-mix(in oklab, var(--color-purple-500) 20%, transparent)}}.from-purple-500\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-blue-500\/20{--tw-gradient-to:#3080ff33}@supports (color:color-mix(in lab, red, red)){.to-blue-500\/20{--tw-gradient-to:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.to-blue-500\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-pink-500\/20{--tw-gradient-to:#f6339a33}@supports (color:color-mix(in lab, red, red)){.to-pink-500\/20{--tw-gradient-to:color-mix(in oklab, var(--color-pink-500) 20%, transparent)}}.to-pink-500\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[5\%\]{padding-inline:5%}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-justify{text-align:justify}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.opacity-50{opacity:.5}.opacity-65{opacity:.65}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:opacity-100:hover{opacity:1}}@media not all and (min-width:40rem){.max-sm\:hidden{display:none}.max-sm\:h-12{height:calc(var(--spacing) * 12)}.max-sm\:h-\[4rem\]{height:4rem}.max-sm\:w-12{width:calc(var(--spacing) * 12)}.max-sm\:w-\[4rem\]{width:4rem}.max-sm\:flex-col-reverse{flex-direction:column-reverse}:where(.max-sm\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}.max-sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.max-sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media (min-width:40rem){.sm\:flex-row{flex-direction:row}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}.lg\:gap-16{gap:calc(var(--spacing) * 16)}.lg\:px-\[8\%\]{padding-inline:8%}.lg\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.lg\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.lg\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}@media (min-width:80rem){.xl\:w-80{width:calc(var(--spacing) * 80)}.xl\:flex-row{flex-direction:row}}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-pop-cards",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "packageManager": "pnpm@10.30.0",
     "description": "Animated pop card component for React",
     "main": "dist/index.js",
@@ -12,7 +12,7 @@
             "import": "./dist/index.mjs",
             "require": "./dist/index.js"
         },
-        "./styles.css": "./dist/index.css"
+        "./styles.css": "./dist/styles.css"
     },
     "files": [
         "dist",
@@ -34,7 +34,7 @@
     "license": "MIT",
     "scripts": {
         "dev": "vite",
-        "build": "tsup",
+        "build": "tsup && npx @tailwindcss/cli -i src/lib/styles.css -o dist/styles.css --minify",
         "build:vercel": "vite build",
         "typecheck": "tsc --noEmit",
         "preview": "vite preview",
@@ -45,18 +45,17 @@
     "peerDependencies": {
         "react": ">=19",
         "react-dom": ">=19",
-        "tailwindcss": ">=4",
         "typescript": ">=5",
         "vite": ">=7"
     },
     "dependencies": {
         "@react-spring/web": "^10.0.3",
-        "chroma-js": "^3.1.2",
-        "tailwindcss": "^4.2.0",
-        "@tailwindcss/vite": "^4.2.0"
+        "chroma-js": "^3.1.2"
     },
     "devDependencies": {
         "@biomejs/biome": "2.4.2",
+        "@tailwindcss/cli": "^4.2.0",
+        "@tailwindcss/vite": "^4.2.0",
         "@monaco-editor/react": "^4.7.0",
         "@types/chroma-js": "^3.1.2",
         "@types/node": "^25.3.0",
@@ -68,6 +67,7 @@
         "react": "^19.0.0",
         "react-best-gradient-color-picker": "^3.0.10",
         "react-dom": "^19.0.0",
+        "tailwindcss": "^4.2.0",
         "tsup": "^8.3.6",
         "typescript": "^5",
         "vite": "^7"