@stfrigerio/sito-template 0.1.35 → 0.1.37

package/storybook-static/assets/Calendar.stories-CKOG4XAn.js

@@ -0,0 +1,545 @@
+import{r as x,j as e}from"./iframe-BUaP2gIF.js";import{m as Y}from"./proxy-9Y4F2rF8.js";import"./preload-helper-C1FmrZbK.js";const _e="_calendar_1k9gq_2",je="_loading_1k9gq_14",Te="_loadingSpinner_1k9gq_21",ze="_header_1k9gq_27",Me="_navigation_1k9gq_35",$e="_navButton_1k9gq_41",Ne="_title_1k9gq_60",Re="_controls_1k9gq_70",Be="_todayButton_1k9gq_76",qe="_viewToggle_1k9gq_92",Le="_viewButton_1k9gq_99",Fe="_active_1k9gq_113",Ae="_weekDays_1k9gq_123",Ie="_weekNumberHeader_1k9gq_134",Pe="_weekDay_1k9gq_123",We="_daysGrid_1k9gq_151",Ve="_weekView_1k9gq_161",Oe="_dayCell_1k9gq_165",Ue="_dayNumber_1k9gq_194",He="_today_1k9gq_76",Ye="_events_1k9gq_213",Ge="_event_1k9gq_213",Je="_eventTitle_1k9gq_235",Ke="_eventTime_1k9gq_240",Qe="_otherMonth_1k9gq_280",Xe="_weekNumber_1k9gq_134",Ze="_completed_1k9gq_330",et="_completedIcon_1k9gq_351",tt="_moreEvents_1k9gq_358",nt="_emptyState_1k9gq_368",a={calendar:_e,loading:je,loadingSpinner:Te,header:ze,navigation:Me,navButton:$e,title:Ne,controls:Re,todayButton:Be,viewToggle:qe,viewButton:Le,active:Fe,weekDays:Ae,weekNumberHeader:Ie,weekDay:Pe,daysGrid:We,weekView:Ve,dayCell:Oe,dayNumber:Ue,today:He,events:Ye,event:Ge,eventTitle:Je,eventTime:Ke,otherMonth:Qe,weekNumber:Xe,completed:Ze,completedIcon:et,moreEvents:tt,emptyState:nt};function S({events:n,onEventClick:r,onDateClick:c,viewMode:m="month",initialDate:y=new Date,config:h={},className:i="",style:d={},loading:s=!1,emptyState:v}){const[u,B]=x.useState(y),[w,I]=x.useState(m),{eventColors:P={},iconRenderer:W,maxEventsPerDay:q=3,mondayStart:C=!1,showWeekNumbers:V=!1,dateFormat:O={month:"long",year:"numeric"},locale:b="en-US",dayLabels:ue,monthNames:_}=h,ye=ue||(C?["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]),U=x.useMemo(()=>{const t=u.getFullYear(),l=u.getMonth();let o,p,k;if(w==="week"){o=new Date(u);const D=o.getDay(),f=C?o.getDate()-D+(D===0?-6:1):o.getDate()-D;o=new Date(o.setDate(f)),o.setHours(0,0,0,0),p=new Date(o),p.setDate(p.getDate()+6);const L=o.toLocaleDateString(b,{day:"numeric",month:"short"}),F=p.toLocaleDateString(b,{day:"numeric",month:"short"});k=`${L} - ${F}`}else{const D=new Date(t,l,1),f=new Date(t,l+1,0);o=new Date(D);const L=C?(D.getDay()+6)%7:D.getDay();o.setDate(o.getDate()-L),p=new Date(f);const F=C?(f.getDay()+6)%7:f.getDay();p.setDate(p.getDate()+(6-F)),_&&_[l]?k=`${_[l]} ${t}`:k=u.toLocaleDateString(b,O)}const E=[],g=new Date(o);for(;g<=p;)E.push(new Date(g)),g.setDate(g.getDate()+1);return{days:E,displayTitle:k}},[u,w,C,b,O,_]),he=t=>{const l=n.filter(o=>new Date(o.date).toDateString()===t.toDateString());return w==="week"?l.sort((o,p)=>{const k=o.time?H(o.time):999999,E=p.time?H(p.time):999999;return k-E}):l},H=t=>{const[l,o]=t.split(":").map(Number);return l*60+o},we=()=>{const t=new Date(u);w==="week"?t.setDate(t.getDate()-7):t.setMonth(t.getMonth()-1),B(t)},De=()=>{const t=new Date(u);w==="week"?t.setDate(t.getDate()+7):t.setMonth(t.getMonth()+1),B(t)},ke=()=>{B(new Date)},xe=t=>{if(t.color)return t.color;if(t.type&&P[t.type])return P[t.type];const l={high:"#FF4444",medium:"#FFA500",low:"#4A90E2"};return t.priority&&l[t.priority]?l[t.priority]:"#4A90E2"},fe=t=>{r&&r(t)},Se=t=>{c&&c(t)},Ee=t=>{const l=new Date;return t.toDateString()===l.toDateString()},Ce=t=>t.getMonth()===u.getMonth(),be=t=>{const l=new Date(t.getFullYear(),0,1),o=t.getTime()-l.getTime(),p=1e3*60*60*24*7;return Math.floor(o/p)+1};return s?e.jsx("div",{className:`${a.calendar} ${a.loading} ${i}`,style:d,children:e.jsx("div",{className:a.loadingSpinner,children:"Loading..."})}):e.jsxs("div",{className:`${a.calendar} ${i}`,style:d,children:[e.jsxs("div",{className:a.header,children:[e.jsxs("div",{className:a.navigation,children:[e.jsx("button",{onClick:we,className:a.navButton,"aria-label":"Previous",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:e.jsx("polyline",{points:"15,18 9,12 15,6"})})}),e.jsx("h3",{className:a.title,children:U.displayTitle}),e.jsx("button",{onClick:De,className:a.navButton,"aria-label":"Next",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:e.jsx("polyline",{points:"9,6 15,12 9,18"})})})]}),e.jsxs("div",{className:a.controls,children:[e.jsx("button",{onClick:ke,className:a.todayButton,children:"Today"}),e.jsxs("div",{className:a.viewToggle,children:[e.jsx("button",{className:`${a.viewButton} ${w==="month"?a.active:""}`,onClick:()=>I("month"),children:"Month"}),e.jsx("button",{className:`${a.viewButton} ${w==="week"?a.active:""}`,onClick:()=>I("week"),children:"Week"})]})]})]}),e.jsxs("div",{className:a.weekDays,children:[V&&e.jsx("div",{className:a.weekNumberHeader,children:"Week"}),ye.map(t=>e.jsx("div",{className:a.weekDay,children:t},t))]}),e.jsx("div",{className:`${a.daysGrid} ${w==="week"?a.weekView:""}`,children:U.days.map((t,l)=>{const o=he(t),p=Ee(t),k=w==="week"||Ce(t),E=V&&l%7===0;return e.jsxs(Y.div,{className:`${a.dayCell} ${p?a.today:""} ${k?"":a.otherMonth}`,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.3,delay:l*.02,ease:"easeOut"},onClick:()=>Se(t),children:[E&&e.jsx("div",{className:a.weekNumber,children:be(t)}),e.jsx("div",{className:a.dayNumber,children:t.getDate()}),o.length>0&&e.jsxs("div",{className:a.events,children:[o.slice(0,q).map((g,D)=>e.jsxs(Y.div,{className:`${a.event} ${g.status==="completed"?a.completed:""}`,style:{backgroundColor:xe(g),opacity:g.status==="completed"?.7:1},onClick:f=>{f.stopPropagation(),fe(g)},initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{duration:.2,delay:D*.05,ease:"easeOut"},whileHover:{scale:1.02,y:-1,transition:{duration:.1}},whileTap:{scale:.98,transition:{duration:.1}},children:[W&&W(g),e.jsxs("span",{className:a.eventTitle,children:[g.time&&e.jsx("span",{className:a.eventTime,children:g.time}),g.title]}),g.status==="completed"&&e.jsx("svg",{className:a.completedIcon,width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",children:e.jsx("polyline",{points:"20,6 9,17 4,12"})})]},g.id)),o.length>q&&e.jsxs("div",{className:a.moreEvents,children:["+",o.length-q," more"]})]}),o.length===0&&v&&e.jsx("div",{className:a.emptyState,children:v})]},`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`)})})]})}S.__docgenInfo={description:`Calendar component - A flexible, reusable calendar for displaying events
+
+@component
+@description
+A highly customizable calendar component that can display events in month or week view.
+Supports custom event types, colors, icons, and localization. Perfect for scheduling,
+project management, habit tracking, or any date-based data visualization.
+
+@example
+// Basic usage
+<Calendar
+  events={myEvents}
+  onEventClick={handleEventClick}
+  viewMode="month"
+/>
+
+@example
+// With custom configuration
+<Calendar
+  events={projectEvents}
+  config={{
+    eventColors: { task: '#4A90E2', meeting: '#7ED321' },
+    maxEventsPerDay: 5,
+    mondayStart: true
+  }}
+  onEventClick={handleEventClick}
+/>`,methods:[],displayName:"Calendar",props:{events:{required:!0,tsType:{name:"Array",elements:[{name:"CalendarEvent"}],raw:"CalendarEvent[]"},description:"Array of events to display"},onEventClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: CalendarEvent) => void",signature:{arguments:[{type:{name:"CalendarEvent"},name:"event"}],return:{name:"void"}}},description:"Callback when an event is clicked"},onDateClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(date: Date) => void",signature:{arguments:[{type:{name:"Date"},name:"date"}],return:{name:"void"}}},description:"Callback when a date is clicked"},viewMode:{required:!1,tsType:{name:"union",raw:"'month' | 'week'",elements:[{name:"literal",value:"'month'"},{name:"literal",value:"'week'"}]},description:"Initial view mode",defaultValue:{value:"'month'",computed:!1}},initialDate:{required:!1,tsType:{name:"Date"},description:"Initial date to display",defaultValue:{value:"new Date()",computed:!1}},config:{required:!1,tsType:{name:"CalendarConfig"},description:"Configuration options",defaultValue:{value:"{}",computed:!1}},className:{required:!1,tsType:{name:"string"},description:"Custom CSS class",defaultValue:{value:"''",computed:!1}},style:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:"Custom styles",defaultValue:{value:"{}",computed:!1}},loading:{required:!1,tsType:{name:"boolean"},description:"Loading state",defaultValue:{value:"false",computed:!1}},emptyState:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"Custom empty state component"}}};const rt={title:"Organisms/Calendar",component:S,parameters:{layout:"padded",docs:{description:{component:"A flexible, customizable calendar component for displaying events in month or week view. Perfect for scheduling, project management, habit tracking, or any date-based data visualization."}}},tags:["autodocs"],argTypes:{events:{control:"object",description:"Array of events to display on the calendar"},viewMode:{control:"radio",options:["month","week"],description:"Initial view mode for the calendar"},onEventClick:{action:"event-clicked"},onDateClick:{action:"date-clicked"}}},A=()=>{const n=new Date,r=[];for(let c=0;c<15;c++){const m=new Date(n);m.setDate(n.getDate()+Math.floor(Math.random()*30)-15),r.push({id:`event-${c}`,title:`Event ${c+1}`,date:m,time:Math.random()>.5?`${9+Math.floor(Math.random()*8)}:${Math.random()>.5?"00":"30"}`:void 0,type:["meeting","task","deadline","milestone"][Math.floor(Math.random()*4)],status:Math.random()>.7?"completed":"pending",priority:["high","medium","low"][Math.floor(Math.random()*3)]})}return r},j={args:{events:A(),viewMode:"month"}},T={args:{events:A(),viewMode:"week"}},z={render:()=>{const[n,r]=x.useState(null),[c,m]=x.useState(null),[y,h]=x.useState(A()),i=s=>{r(s),console.log("Event clicked:",s),h(v=>v.map(u=>u.id===s.id?{...u,status:u.status==="completed"?"pending":"completed"}:u))},d=s=>{m(s),console.log("Date clicked:",s)};return e.jsxs("div",{children:[e.jsx(S,{events:y,onEventClick:i,onDateClick:d,viewMode:"month"}),e.jsxs("div",{style:{marginTop:"var(--spacing-lg)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)"},children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-primary)"},children:"🎯 Click Events Above to See Interaction"}),n&&e.jsxs("div",{style:{marginBottom:"var(--spacing-md)",padding:"var(--spacing-sm)",background:"var(--color-background)",borderRadius:"var(--radius-sm)",border:"1px solid var(--color-border)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-xs) 0",color:"var(--color-text)"},children:"📅 Event Clicked (toggled status):"}),e.jsxs("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:"Title:"})," ",n.title]}),e.jsxs("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:"Date:"})," ",new Date(n.date).toLocaleDateString()]}),n.time&&e.jsxs("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:"Time:"})," ",n.time]}),e.jsxs("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:"Type:"})," ",n.type]}),e.jsxs("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:[e.jsx("strong",{children:"Status:"}),e.jsx("span",{style:{marginLeft:"var(--spacing-xs)",padding:"2px 6px",borderRadius:"var(--radius-xs)",backgroundColor:n.status==="completed"?"#7ED321":"#FFA500",color:"white",fontSize:"var(--font-size-xs)"},children:n.status})]}),e.jsx("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:e.jsx("strong",{children:"Full Event Object:"})}),e.jsx("pre",{style:{margin:"4px 0",padding:"var(--spacing-xs)",background:"var(--color-background-tertiary)",borderRadius:"var(--radius-xs)",fontSize:"var(--font-size-xs)",overflow:"auto"},children:JSON.stringify(n,null,2)})]}),c&&e.jsxs("div",{style:{padding:"var(--spacing-sm)",background:"var(--color-background)",borderRadius:"var(--radius-sm)",border:"1px solid var(--color-border)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-xs) 0",color:"var(--color-text)"},children:"📆 Date Clicked:"}),e.jsx("p",{style:{margin:"4px 0",fontSize:"var(--font-size-sm)"},children:c.toLocaleDateString("en-US",{weekday:"long",year:"numeric",month:"long",day:"numeric"})}),e.jsx("p",{style:{margin:"4px 0",fontSize:"var(--font-size-xs)",color:"var(--color-text-secondary)"},children:"💡 You could create a new event here, open a day view, etc."})]}),!n&&!c&&e.jsx("p",{style:{margin:0,fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)",fontStyle:"italic"},children:"Click on any event or date above to see the interaction..."})]})]})}},M={render:()=>{const n=[],r=new Date,c=["Exercise","Meditation","Reading","Water intake","Sleep"],m=["💪","🧘","📚","💧","😴"];for(let y=-10;y<=10;y++){const h=new Date(r);h.setDate(r.getDate()+y),c.forEach((i,d)=>{Math.random()>.3&&n.push({id:`habit-${y}-${d}`,title:i,date:new Date(h),type:"habit",status:Math.random()>.1?"completed":"pending",color:`hsl(${d*70}, 70%, 50%)`,metadata:{icon:m[d]}})})}return e.jsx(S,{events:n,config:{iconRenderer:y=>{var h;return e.jsx("span",{style:{fontSize:"10px"},children:((h=y.metadata)==null?void 0:h.icon)||"✓"})},maxEventsPerDay:8,mondayStart:!0},viewMode:"month"})}},$={render:()=>{const n=new Date,r=[{id:"schedule-1",title:"Team Standup",date:new Date(n.getTime()-(n.getDay()-1)*24*60*60*1e3),time:"09:00",type:"meeting",status:"pending",priority:"medium"},{id:"schedule-2",title:"Code Review",date:new Date(n.getTime()-(n.getDay()-1)*24*60*60*1e3),time:"11:30",type:"review",status:"completed",priority:"high"},{id:"schedule-3",title:"Client Call",date:new Date(n.getTime()-(n.getDay()-2)*24*60*60*1e3),time:"10:00",type:"call",status:"pending",priority:"high"},{id:"schedule-4",title:"Sprint Planning",date:new Date(n.getTime()-(n.getDay()-2)*24*60*60*1e3),time:"14:00",type:"meeting",status:"pending",priority:"high"},{id:"schedule-5",title:"Design Review",date:new Date(n.getTime()-(n.getDay()-3)*24*60*60*1e3),time:"15:00",type:"review",status:"pending",priority:"medium"},{id:"schedule-6",title:"All Hands Meeting",date:new Date(n.getTime()-(n.getDay()-4)*24*60*60*1e3),time:"16:00",type:"meeting",status:"pending",priority:"low"},{id:"schedule-7",title:"Demo Day",date:new Date(n.getTime()-(n.getDay()-5)*24*60*60*1e3),time:"13:00",type:"presentation",status:"pending",priority:"high"},{id:"schedule-8",title:"Team Lunch",date:new Date(n.getTime()-(n.getDay()-5)*24*60*60*1e3),time:"12:00",type:"break",status:"pending",priority:"low"}];return e.jsx(S,{events:r,config:{eventColors:{meeting:"#4A90E2",call:"#7ED321",break:"#F5A623",review:"#BD10E0",presentation:"#FF6B6B"},iconRenderer:c=>{const m={meeting:"👥",call:"📞",break:"🍽️",review:"👀",presentation:"🎯"};return e.jsx("span",{style:{fontSize:"12px"},children:m[c.type]||"📅"})},maxEventsPerDay:6,mondayStart:!0},viewMode:"week"})}},N={render:()=>{const n=[{id:"custom-1",title:"VIP Client Meeting",date:new Date,time:"10:00",type:"vip",status:"pending",priority:"high"},{id:"custom-2",title:"Design Sprint",date:new Date(Date.now()+864e5),type:"workshop",status:"pending",priority:"medium"},{id:"custom-3",title:"Project Milestone ✓",date:new Date(Date.now()-864e5),type:"milestone",status:"completed",priority:"high"}];return e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text)"},children:"🎨 Custom Colors, Icons & Configuration"}),e.jsx(S,{events:n,config:{eventColors:{vip:"#FF6B6B",workshop:"#4ECDC4",milestone:"#F39C12"},iconRenderer:r=>r.type==="vip"?e.jsx("span",{style:{fontSize:"12px"},children:"⭐"}):r.type==="workshop"?e.jsx("span",{style:{fontSize:"12px"},children:"🎨"}):r.type==="milestone"?e.jsx("span",{style:{fontSize:"12px"},children:"🎯"}):e.jsx("span",{style:{fontSize:"12px"},children:"📅"}),maxEventsPerDay:6,mondayStart:!0,showWeekNumbers:!0,locale:"en-US"},viewMode:"month"})]})}},R={render:()=>{const[n,r]=x.useState([{id:"1",title:"Project Kickoff Meeting",date:new Date,time:"10:00",type:"meeting",status:"pending",priority:"high",metadata:{attendees:["John","Sarah","Mike"],location:"Conference Room A",description:"Initial project planning and team introductions"}},{id:"2",title:"Design Review",date:new Date(Date.now()+864e5),time:"14:30",type:"review",status:"pending",priority:"medium",metadata:{reviewType:"UI/UX",reviewer:"Design Team"}},{id:"3",title:"Code Deployment",date:new Date(Date.now()+1728e5),type:"deployment",status:"pending",priority:"high",metadata:{environment:"production",version:"v2.1.0"}}]),[c,m]=x.useState([]),y=i=>{const d=new Date().toLocaleTimeString();switch(i.type){case"meeting":m(s=>[`[${d}] 📹 Opening meeting: "${i.title}"`,...s]);break;case"review":m(s=>[`[${d}] 👀 Opening review: "${i.title}"`,...s]);break;case"deployment":m(s=>[`[${d}] 🚀 Deployment details: "${i.title}"`,...s]);break;default:m(s=>[`[${d}] 📅 Event selected: "${i.title}"`,...s])}r(s=>s.map(v=>v.id===i.id?{...v,status:v.status==="completed"?"pending":"completed"}:v))},h=i=>{const d=new Date().toLocaleTimeString();m(v=>[`[${d}] 📆 Creating new event on ${i.toLocaleDateString()}`,...v]);const s={id:`new-${Date.now()}`,title:"Quick Meeting",date:i,time:"15:00",type:"meeting",status:"pending",priority:"medium"};r(v=>[...v,s])};return e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text)"},children:"🎯 Real-World Usage Example"}),e.jsx("p",{style:{marginBottom:"var(--spacing-lg)",color:"var(--color-text-secondary)",fontSize:"var(--font-size-sm)"},children:"Click events to toggle status, click dates to add new events"}),e.jsx(S,{events:n,onEventClick:y,onDateClick:h,config:{eventColors:{meeting:"#4A90E2",review:"#BD10E0",deployment:"#FF6B6B"},iconRenderer:i=>{const d={meeting:"👥",review:"👀",deployment:"🚀"};return e.jsx("span",{children:d[i.type]||"📅"})},maxEventsPerDay:5},viewMode:"month"}),e.jsxs("div",{style:{marginTop:"var(--spacing-lg)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)",maxHeight:"200px",overflow:"auto"},children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-sm) 0",color:"var(--color-text)"},children:"🔄 Action Log (Latest First)"}),c.length===0?e.jsx("p",{style:{margin:0,fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)",fontStyle:"italic"},children:"No actions yet - click on events or dates above"}):e.jsx("div",{children:c.map((i,d)=>e.jsx("div",{style:{padding:"var(--spacing-xs)",margin:"2px 0",background:"var(--color-background)",borderRadius:"var(--radius-xs)",fontSize:"var(--font-size-xs)",fontFamily:"monospace"},children:i},d))})]})]})}};var G,J,K;j.parameters={...j.parameters,docs:{...(G=j.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    events: generateSampleEvents(),
+    viewMode: 'month'
+  }
+}`,...(K=(J=j.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Q,X,Z;T.parameters={...T.parameters,docs:{...(Q=T.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  args: {
+    events: generateSampleEvents(),
+    viewMode: 'week'
+  }
+}`,...(Z=(X=T.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var ee,te,ne;z.parameters={...z.parameters,docs:{...(ee=z.parameters)==null?void 0:ee.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
+    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
+    const [events, setEvents] = useState(generateSampleEvents());
+
+    // This is where your consuming app would handle event clicks
+    const handleEventClick = (event: CalendarEvent) => {
+      setSelectedEvent(event);
+
+      // Example: You could open a modal, navigate to details, etc.
+      console.log('Event clicked:', event);
+
+      // Example: Toggle event status on click
+      setEvents(prevEvents => prevEvents.map(e => e.id === event.id ? {
+        ...e,
+        status: e.status === 'completed' ? 'pending' : 'completed'
+      } : e));
+    };
+
+    // This is where your consuming app would handle date clicks
+    const handleDateClick = (date: Date) => {
+      setSelectedDate(date);
+      console.log('Date clicked:', date);
+
+      // Example: You could create a new event on this date
+      // Example: Open a date picker or day view
+    };
+    return <div>
+                <Calendar events={events} onEventClick={handleEventClick} onDateClick={handleDateClick} viewMode="month" />
+                
+                <div style={{
+        marginTop: 'var(--spacing-lg)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)'
+      }}>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-primary)'
+        }}>
+                        🎯 Click Events Above to See Interaction
+                    </h4>
+                    
+                    {selectedEvent && <div style={{
+          marginBottom: 'var(--spacing-md)',
+          padding: 'var(--spacing-sm)',
+          background: 'var(--color-background)',
+          borderRadius: 'var(--radius-sm)',
+          border: '1px solid var(--color-border)'
+        }}>
+                            <h5 style={{
+            margin: '0 0 var(--spacing-xs) 0',
+            color: 'var(--color-text)'
+          }}>
+                                📅 Event Clicked (toggled status):
+                            </h5>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                <strong>Title:</strong> {selectedEvent.title}
+                            </p>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                <strong>Date:</strong> {new Date(selectedEvent.date).toLocaleDateString()}
+                            </p>
+                            {selectedEvent.time && <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                    <strong>Time:</strong> {selectedEvent.time}
+                                </p>}
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                <strong>Type:</strong> {selectedEvent.type}
+                            </p>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                <strong>Status:</strong> 
+                                <span style={{
+              marginLeft: 'var(--spacing-xs)',
+              padding: '2px 6px',
+              borderRadius: 'var(--radius-xs)',
+              backgroundColor: selectedEvent.status === 'completed' ? '#7ED321' : '#FFA500',
+              color: 'white',
+              fontSize: 'var(--font-size-xs)'
+            }}>
+                                    {selectedEvent.status}
+                                </span>
+                            </p>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                <strong>Full Event Object:</strong>
+                            </p>
+                            <pre style={{
+            margin: '4px 0',
+            padding: 'var(--spacing-xs)',
+            background: 'var(--color-background-tertiary)',
+            borderRadius: 'var(--radius-xs)',
+            fontSize: 'var(--font-size-xs)',
+            overflow: 'auto'
+          }}>
+                                {JSON.stringify(selectedEvent, null, 2)}
+                            </pre>
+                        </div>}
+                    
+                    {selectedDate && <div style={{
+          padding: 'var(--spacing-sm)',
+          background: 'var(--color-background)',
+          borderRadius: 'var(--radius-sm)',
+          border: '1px solid var(--color-border)'
+        }}>
+                            <h5 style={{
+            margin: '0 0 var(--spacing-xs) 0',
+            color: 'var(--color-text)'
+          }}>
+                                📆 Date Clicked:
+                            </h5>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-sm)'
+          }}>
+                                {selectedDate.toLocaleDateString('en-US', {
+              weekday: 'long',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric'
+            })}
+                            </p>
+                            <p style={{
+            margin: '4px 0',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-secondary)'
+          }}>
+                                💡 You could create a new event here, open a day view, etc.
+                            </p>
+                        </div>}
+                    
+                    {!selectedEvent && !selectedDate && <p style={{
+          margin: 0,
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)',
+          fontStyle: 'italic'
+        }}>
+                            Click on any event or date above to see the interaction...
+                        </p>}
+                </div>
+            </div>;
+  }
+}`,...(ne=(te=z.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var ae,oe,ie;M.parameters={...M.parameters,docs:{...(ae=M.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  render: () => {
+    const habitEvents: CalendarEvent[] = [];
+    const today = new Date();
+
+    // Generate habit tracking events
+    const habits = ['Exercise', 'Meditation', 'Reading', 'Water intake', 'Sleep'];
+    const habitIcons = ['💪', '🧘', '📚', '💧', '😴'];
+    for (let i = -10; i <= 10; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      habits.forEach((habit, index) => {
+        if (Math.random() > 0.3) {
+          // 70% chance of doing the habit
+          habitEvents.push({
+            id: \`habit-\${i}-\${index}\`,
+            title: habit,
+            date: new Date(date),
+            type: 'habit',
+            status: Math.random() > 0.1 ? 'completed' : 'pending',
+            color: \`hsl(\${index * 70}, 70%, 50%)\`,
+            metadata: {
+              icon: habitIcons[index]
+            }
+          });
+        }
+      });
+    }
+    return <Calendar events={habitEvents} config={{
+      iconRenderer: event => <span style={{
+        fontSize: '10px'
+      }}>{event.metadata?.icon || '✓'}</span>,
+      maxEventsPerDay: 8,
+      mondayStart: true
+    }} viewMode="month" />;
+  }
+}`,...(ie=(oe=M.parameters)==null?void 0:oe.docs)==null?void 0:ie.source}}};var se,re,de;$.parameters={...$.parameters,docs:{...(se=$.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  render: () => {
+    const today = new Date();
+    const scheduleEvents: CalendarEvent[] = [
+    // Monday
+    {
+      id: 'schedule-1',
+      title: 'Team Standup',
+      date: new Date(today.getTime() - (today.getDay() - 1) * 24 * 60 * 60 * 1000),
+      time: '09:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'medium'
+    }, {
+      id: 'schedule-2',
+      title: 'Code Review',
+      date: new Date(today.getTime() - (today.getDay() - 1) * 24 * 60 * 60 * 1000),
+      time: '11:30',
+      type: 'review',
+      status: 'completed',
+      priority: 'high'
+    },
+    // Tuesday
+    {
+      id: 'schedule-3',
+      title: 'Client Call',
+      date: new Date(today.getTime() - (today.getDay() - 2) * 24 * 60 * 60 * 1000),
+      time: '10:00',
+      type: 'call',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: 'schedule-4',
+      title: 'Sprint Planning',
+      date: new Date(today.getTime() - (today.getDay() - 2) * 24 * 60 * 60 * 1000),
+      time: '14:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'high'
+    },
+    // Wednesday
+    {
+      id: 'schedule-5',
+      title: 'Design Review',
+      date: new Date(today.getTime() - (today.getDay() - 3) * 24 * 60 * 60 * 1000),
+      time: '15:00',
+      type: 'review',
+      status: 'pending',
+      priority: 'medium'
+    },
+    // Thursday
+    {
+      id: 'schedule-6',
+      title: 'All Hands Meeting',
+      date: new Date(today.getTime() - (today.getDay() - 4) * 24 * 60 * 60 * 1000),
+      time: '16:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'low'
+    },
+    // Friday
+    {
+      id: 'schedule-7',
+      title: 'Demo Day',
+      date: new Date(today.getTime() - (today.getDay() - 5) * 24 * 60 * 60 * 1000),
+      time: '13:00',
+      type: 'presentation',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: 'schedule-8',
+      title: 'Team Lunch',
+      date: new Date(today.getTime() - (today.getDay() - 5) * 24 * 60 * 60 * 1000),
+      time: '12:00',
+      type: 'break',
+      status: 'pending',
+      priority: 'low'
+    }];
+    return <Calendar events={scheduleEvents} config={{
+      eventColors: {
+        meeting: '#4A90E2',
+        call: '#7ED321',
+        break: '#F5A623',
+        review: '#BD10E0',
+        presentation: '#FF6B6B'
+      },
+      iconRenderer: event => {
+        const icons = {
+          meeting: '👥',
+          call: '📞',
+          break: '🍽️',
+          review: '👀',
+          presentation: '🎯'
+        };
+        return <span style={{
+          fontSize: '12px'
+        }}>{icons[event.type as keyof typeof icons] || '📅'}</span>;
+      },
+      maxEventsPerDay: 6,
+      mondayStart: true
+    }} viewMode="week" />;
+  }
+}`,...(de=(re=$.parameters)==null?void 0:re.docs)==null?void 0:de.source}}};var le,ce,me;N.parameters={...N.parameters,docs:{...(le=N.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  render: () => {
+    const customEvents: CalendarEvent[] = [{
+      id: 'custom-1',
+      title: 'VIP Client Meeting',
+      date: new Date(),
+      time: '10:00',
+      type: 'vip',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: 'custom-2',
+      title: 'Design Sprint',
+      date: new Date(Date.now() + 24 * 60 * 60 * 1000),
+      type: 'workshop',
+      status: 'pending',
+      priority: 'medium'
+    }, {
+      id: 'custom-3',
+      title: 'Project Milestone ✓',
+      date: new Date(Date.now() - 24 * 60 * 60 * 1000),
+      type: 'milestone',
+      status: 'completed',
+      priority: 'high'
+    }];
+    return <div>
+                <h3 style={{
+        marginBottom: 'var(--spacing-md)',
+        color: 'var(--color-text)'
+      }}>
+                    🎨 Custom Colors, Icons & Configuration
+                </h3>
+                <Calendar events={customEvents} config={{
+        eventColors: {
+          vip: '#FF6B6B',
+          workshop: '#4ECDC4',
+          milestone: '#F39C12'
+        },
+        iconRenderer: event => {
+          if (event.type === 'vip') return <span style={{
+            fontSize: '12px'
+          }}>⭐</span>;
+          if (event.type === 'workshop') return <span style={{
+            fontSize: '12px'
+          }}>🎨</span>;
+          if (event.type === 'milestone') return <span style={{
+            fontSize: '12px'
+          }}>🎯</span>;
+          return <span style={{
+            fontSize: '12px'
+          }}>📅</span>;
+        },
+        maxEventsPerDay: 6,
+        mondayStart: true,
+        showWeekNumbers: true,
+        locale: 'en-US'
+      }} viewMode="month" />
+            </div>;
+  }
+}`,...(me=(ce=N.parameters)==null?void 0:ce.docs)==null?void 0:me.source}}};var pe,ge,ve;R.parameters={...R.parameters,docs:{...(pe=R.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  render: () => {
+    const [events, setEvents] = useState<CalendarEvent[]>([{
+      id: '1',
+      title: 'Project Kickoff Meeting',
+      date: new Date(),
+      time: '10:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'high',
+      metadata: {
+        attendees: ['John', 'Sarah', 'Mike'],
+        location: 'Conference Room A',
+        description: 'Initial project planning and team introductions'
+      }
+    }, {
+      id: '2',
+      title: 'Design Review',
+      date: new Date(Date.now() + 24 * 60 * 60 * 1000),
+      time: '14:30',
+      type: 'review',
+      status: 'pending',
+      priority: 'medium',
+      metadata: {
+        reviewType: 'UI/UX',
+        reviewer: 'Design Team'
+      }
+    }, {
+      id: '3',
+      title: 'Code Deployment',
+      date: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
+      type: 'deployment',
+      status: 'pending',
+      priority: 'high',
+      metadata: {
+        environment: 'production',
+        version: 'v2.1.0'
+      }
+    }]);
+    const [actionLog, setActionLog] = useState<string[]>([]);
+
+    // Real-world event click handler examples
+    const handleEventClick = (event: CalendarEvent) => {
+      const timestamp = new Date().toLocaleTimeString();
+
+      // Different actions based on event type
+      switch (event.type) {
+        case 'meeting':
+          // Could open meeting details modal, join video call, etc.
+          setActionLog(prev => [\`[\${timestamp}] 📹 Opening meeting: "\${event.title}"\`, ...prev]);
+          break;
+        case 'review':
+          // Could open review dashboard, show files to review, etc.
+          setActionLog(prev => [\`[\${timestamp}] 👀 Opening review: "\${event.title}"\`, ...prev]);
+          break;
+        case 'deployment':
+          // Could show deployment status, logs, rollback options, etc.
+          setActionLog(prev => [\`[\${timestamp}] 🚀 Deployment details: "\${event.title}"\`, ...prev]);
+          break;
+        default:
+          setActionLog(prev => [\`[\${timestamp}] 📅 Event selected: "\${event.title}"\`, ...prev]);
+      }
+
+      // Example: Mark as completed/pending on click
+      setEvents(prevEvents => prevEvents.map(e => e.id === event.id ? {
+        ...e,
+        status: e.status === 'completed' ? 'pending' : 'completed'
+      } : e));
+    };
+    const handleDateClick = (date: Date) => {
+      const timestamp = new Date().toLocaleTimeString();
+      setActionLog(prev => [\`[\${timestamp}] 📆 Creating new event on \${date.toLocaleDateString()}\`, ...prev]);
+
+      // Example: Add new event on date click
+      const newEvent: CalendarEvent = {
+        id: \`new-\${Date.now()}\`,
+        title: 'Quick Meeting',
+        date: date,
+        time: '15:00',
+        type: 'meeting',
+        status: 'pending',
+        priority: 'medium'
+      };
+      setEvents(prev => [...prev, newEvent]);
+    };
+    return <div>
+                <h3 style={{
+        marginBottom: 'var(--spacing-md)',
+        color: 'var(--color-text)'
+      }}>
+                    🎯 Real-World Usage Example
+                </h3>
+                <p style={{
+        marginBottom: 'var(--spacing-lg)',
+        color: 'var(--color-text-secondary)',
+        fontSize: 'var(--font-size-sm)'
+      }}>
+                    Click events to toggle status, click dates to add new events
+                </p>
+                
+                <Calendar events={events} onEventClick={handleEventClick} onDateClick={handleDateClick} config={{
+        eventColors: {
+          meeting: '#4A90E2',
+          review: '#BD10E0',
+          deployment: '#FF6B6B'
+        },
+        iconRenderer: event => {
+          const icons = {
+            meeting: '👥',
+            review: '👀',
+            deployment: '🚀'
+          };
+          return <span>{icons[event.type as keyof typeof icons] || '📅'}</span>;
+        },
+        maxEventsPerDay: 5
+      }} viewMode="month" />
+                
+                <div style={{
+        marginTop: 'var(--spacing-lg)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)',
+        maxHeight: '200px',
+        overflow: 'auto'
+      }}>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-sm) 0',
+          color: 'var(--color-text)'
+        }}>
+                        🔄 Action Log (Latest First)
+                    </h4>
+                    {actionLog.length === 0 ? <p style={{
+          margin: 0,
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)',
+          fontStyle: 'italic'
+        }}>
+                            No actions yet - click on events or dates above
+                        </p> : <div>
+                            {actionLog.map((log, index) => <div key={index} style={{
+            padding: 'var(--spacing-xs)',
+            margin: '2px 0',
+            background: 'var(--color-background)',
+            borderRadius: 'var(--radius-xs)',
+            fontSize: 'var(--font-size-xs)',
+            fontFamily: 'monospace'
+          }}>
+                                    {log}
+                                </div>)}
+                        </div>}
+                </div>
+            </div>;
+  }
+}`,...(ve=(ge=R.parameters)==null?void 0:ge.docs)==null?void 0:ve.source}}};const dt=["MonthView","WeekView","Interactive","HabitTracker","EventScheduler","CustomConfiguration","RealWorldUsage"];export{N as CustomConfiguration,$ as EventScheduler,M as HabitTracker,z as Interactive,j as MonthView,R as RealWorldUsage,T as WeekView,dt as __namedExportsOrder,rt as default};

package/storybook-static/assets/Card-Bc7TyfBx.css

@@ -0,0 +1 @@
+._card_1ebml_1{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);overflow:hidden;transition:all var(--transition-slow) cubic-bezier(.34,1.56,.64,1);position:relative}._card_1ebml_1:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.02) 100%);pointer-events:none;opacity:0;transition:opacity var(--transition-slow)}._card_1ebml_1:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:radial-gradient(circle at center,var(--color-primary-light),transparent 70%);border-radius:var(--radius-2xl);opacity:0;z-index:-1;transition:opacity var(--transition-slow);filter:blur(40px)}._card_1ebml_1:hover._hoverable_1ebml_50:before{opacity:1}._card_1ebml_1:hover._hoverable_1ebml_50:after{opacity:.15}._card_1ebml_1:hover._hoverable_1ebml_50{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-border-hover, var(--color-border))}._elevated_1ebml_65{box-shadow:var(--shadow-lg);border:none;background:var(--color-surface);transform:translateY(0)}._elevated_1ebml_65:hover._hoverable_1ebml_50{box-shadow:var(--shadow-2xl);transform:translateY(-6px)}._outlined_1ebml_78{background:var(--color-background);border:1px solid var(--color-border);box-shadow:none;position:relative;transition:all var(--transition-base)}._outlined_1ebml_78:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-2xl);opacity:0;z-index:-1;transition:opacity var(--transition-base)}._outlined_1ebml_78:hover._hoverable_1ebml_50{transform:translateY(-4px);border-color:transparent}._outlined_1ebml_78:hover._hoverable_1ebml_50:before{opacity:1}._flat_1ebml_111{border:none;box-shadow:none;background:linear-gradient(135deg,var(--color-background-secondary),rgba(255,255,255,.02));position:relative;overflow:hidden}._flat_1ebml_111:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);transition:left var(--transition-slow)}._flat_1ebml_111:hover._hoverable_1ebml_50{background:linear-gradient(135deg,var(--color-background-tertiary),rgba(255,255,255,.05));box-shadow:0 2px 8px #0000000a,inset 0 1px #ffffff0f;transform:translateY(-2px)}._flat_1ebml_111:hover._hoverable_1ebml_50:before{left:100%}._glass_1ebml_156{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 32px #0000000f,inset 0 0 0 1px #ffffff14}._glass_1ebml_156:before{background:radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(255,255,255,.06),transparent 40%)}._glass_1ebml_156:hover._hoverable_1ebml_50{transform:translateY(-6px) scale(1.01);box-shadow:0 12px 48px #00000014,inset 0 0 0 1px #ffffff1f;border-color:#ffffff40}._imageContainer_1ebml_187{position:relative;overflow:hidden;margin:-1px -1px 0;background:linear-gradient(135deg,var(--color-primary-lighter),var(--color-secondary-lighter))}._imageContainer_1ebml_187:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.4) 100%);opacity:0;transition:opacity var(--transition-slow);pointer-events:none}._card_1ebml_1:hover ._imageContainer_1ebml_187:after{opacity:1}._image_1ebml_187{width:100%;height:auto;display:block;transition:transform var(--transition-slower) cubic-bezier(.25,.46,.45,.94);filter:brightness(1) contrast(1)}._card_1ebml_1:hover._hoverable_1ebml_50 ._image_1ebml_187{transform:scale(1.1) translateY(-4px);filter:brightness(1.05) contrast(1.05)}._header_1ebml_233{padding:var(--spacing-lg);border-bottom:1px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);position:relative}._header_1ebml_233:after{content:"";position:absolute;bottom:0;left:var(--spacing-lg);right:var(--spacing-lg);height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent)}._body_1ebml_260{padding:var(--spacing-lg);position:relative}._footer_1ebml_266{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid transparent;display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing-md);background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.02) 100%);position:relative}._footer_1ebml_266:before{content:"";position:absolute;top:0;left:var(--spacing-lg);right:var(--spacing-lg);height:1px;background:linear-gradient(90deg,transparent,var(--color-border),transparent)}._title_1ebml_297{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);transition:all var(--transition-base)}._card_1ebml_1:hover ._title_1ebml_297{color:var(--color-text);transform:translate(2px)}._subtitle_1ebml_313{margin:var(--spacing-xs) 0 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);opacity:.8;transition:opacity var(--transition-base)}._card_1ebml_1:hover ._subtitle_1ebml_313{opacity:1}._clickable_1ebml_327{cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast)}._clickable_1ebml_327:active{transform:scale(.98);box-shadow:inset 0 2px 8px #00000014,0 1px 2px #0000000d}._padding_1ebml_341{padding:var(--spacing-lg)}._noPadding_1ebml_345{padding:0}._loading_1ebml_350{position:relative;overflow:hidden;pointer-events:none}._loading_1ebml_350:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);animation:_loadingShimmer_1ebml_1 2s infinite;transform:rotate(0)}@keyframes _loadingShimmer_1ebml_1{0%{transform:translate(-100%) translateY(-100%) rotate(30deg)}to{transform:translate(100%) translateY(100%) rotate(30deg)}}._loading_1ebml_350 ._title_1ebml_297,._loading_1ebml_350 ._subtitle_1ebml_313,._loading_1ebml_350 ._body_1ebml_260{position:relative;color:transparent;background:linear-gradient(90deg,var(--color-background-secondary) 25%,var(--color-background-tertiary) 50%,var(--color-background-secondary) 75%);background-size:200% 100%;animation:_loadingPulse_1ebml_1 2s infinite;-webkit-background-clip:text;background-clip:text}@keyframes _loadingPulse_1ebml_1{0%{background-position:200% 0}to{background-position:-200% 0}}[data-theme=dark] ._card_1ebml_1{background:var(--color-surface);border-color:var(--color-border)}[data-theme=dark] ._card_1ebml_1:before{opacity:0}[data-theme=dark] ._card_1ebml_1:after{background:radial-gradient(circle at center,rgba(124,58,237,.2),transparent 70%);filter:blur(60px)}[data-theme=dark] ._elevated_1ebml_65{background:var(--color-surface);box-shadow:var(--shadow-xl)}[data-theme=dark] ._outlined_1ebml_78:before{background:linear-gradient(135deg,#a78bfa66,#2dd4bf66)}[data-theme=dark] ._glass_1ebml_156{background:linear-gradient(135deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0003,inset 0 0 0 1px #ffffff08}[data-theme=dark] ._header_1ebml_233{background:linear-gradient(180deg,rgba(255,255,255,.01) 0%,transparent 100%)}[data-theme=dark] ._footer_1ebml_266{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 100%)}@media (max-width: 768px){._card_1ebml_1{border-radius:var(--radius-xl)}._card_1ebml_1:hover._hoverable_1ebml_50{transform:translateY(-2px)}._header_1ebml_233,._body_1ebml_260,._footer_1ebml_266{padding:var(--spacing-md)}._title_1ebml_297{font-size:var(--font-size-lg)}}

package/storybook-static/assets/Card-D-kcaQHV.js

@@ -0,0 +1,49 @@
+import{j as a}from"./iframe-BUaP2gIF.js";import{m as v}from"./proxy-9Y4F2rF8.js";const C="_card_1ebml_1",y="_hoverable_1ebml_50",x="_elevated_1ebml_65",T="_outlined_1ebml_78",j="_flat_1ebml_111",N="_glass_1ebml_156",q="_imageContainer_1ebml_187",k="_image_1ebml_187",P="_header_1ebml_233",w="_body_1ebml_260",M="_footer_1ebml_266",V="_title_1ebml_297",S="_subtitle_1ebml_313",A="_clickable_1ebml_327",F="_padding_1ebml_341",R="_noPadding_1ebml_345",H="_loading_1ebml_350",I="_loadingShimmer_1ebml_1",L="_loadingPulse_1ebml_1",e={card:C,hoverable:y,elevated:x,outlined:T,flat:j,glass:N,imageContainer:q,image:k,header:P,body:w,footer:M,title:V,subtitle:S,clickable:A,padding:F,noPadding:R,loading:H,loadingShimmer:I,loadingPulse:L},W=({variant:m="elevated",hoverable:l=!1,clickable:i=!1,padding:r=!0,image:s,imageAlt:p="",title:t,subtitle:n,header:o,footer:d,children:c,className:u="",onClick:h,motionProps:f,..._})=>{const b=[e.card,e[m],l&&e.hoverable,i&&e.clickable,!r&&e.noPadding,u].filter(Boolean).join(" "),g=a.jsxs(a.Fragment,{children:[s&&a.jsx("div",{className:e.imageContainer,children:a.jsx("img",{src:s,alt:p,className:e.image})}),o&&a.jsx("div",{className:e.header,children:o}),(t||n)&&!o&&a.jsxs("div",{className:e.header,children:[t&&a.jsx("h3",{className:e.title,children:t}),n&&a.jsx("p",{className:e.subtitle,children:n})]}),c&&a.jsx("div",{className:r?e.body:void 0,children:c}),d&&a.jsx("div",{className:e.footer,children:d})]});return a.jsx(v.div,{className:b,onClick:i?h:void 0,whileHover:l?{y:-4}:void 0,transition:{type:"spring",stiffness:400,damping:17},...f,..._,children:g})};W.__docgenInfo={description:`Card Component
+
+@component
+@description
+A flexible container component that can display content in a structured card layout.
+Supports multiple visual styles, optional images, headers, footers, and smooth animations
+powered by Framer Motion.
+
+@example
+// Basic card with content
+<Card>
+  <p>This is card content</p>
+</Card>
+
+@example
+// Card with title and subtitle
+<Card 
+  title="Card Title" 
+  subtitle="Card subtitle" 
+  variant="outlined"
+>
+  Card body content here
+</Card>
+
+@example
+// Interactive card with image
+<Card 
+  image="/path/to/image.jpg"
+  imageAlt="Description"
+  hoverable
+  clickable
+  onClick={handleCardClick}
+>
+  <h4>Interactive Card</h4>
+  <p>Click me!</p>
+</Card>
+
+@example
+// Card with custom header and footer
+<Card 
+  header={<CustomHeader />}
+  footer={<CustomFooter />}
+  variant="flat"
+>
+  Main content area
+</Card>
+
+@param {CardProps} props - The props for the Card component
+@returns {JSX.Element} The rendered Card component`,methods:[],displayName:"Card",props:{variant:{required:!1,tsType:{name:"union",raw:"'elevated' | 'outlined' | 'flat' | 'glass'",elements:[{name:"literal",value:"'elevated'"},{name:"literal",value:"'outlined'"},{name:"literal",value:"'flat'"},{name:"literal",value:"'glass'"}]},description:"Visual style variant of the card",defaultValue:{value:"'elevated'",computed:!1}},hoverable:{required:!1,tsType:{name:"boolean"},description:"Whether the card should have hover animations",defaultValue:{value:"false",computed:!1}},clickable:{required:!1,tsType:{name:"boolean"},description:"Whether the card should be clickable (adds pointer cursor and click handler)",defaultValue:{value:"false",computed:!1}},padding:{required:!1,tsType:{name:"boolean"},description:"Whether the card content should have padding",defaultValue:{value:"true",computed:!1}},image:{required:!1,tsType:{name:"string"},description:"URL for an optional image at the top of the card"},imageAlt:{required:!1,tsType:{name:"string"},description:"Alt text for the card image",defaultValue:{value:"''",computed:!1}},title:{required:!1,tsType:{name:"string"},description:"Title text for the card header"},subtitle:{required:!1,tsType:{name:"string"},description:"Subtitle text for the card header"},header:{required:!1,tsType:{name:"ReactNode"},description:"Custom header content (overrides title/subtitle)"},footer:{required:!1,tsType:{name:"ReactNode"},description:"Footer content for the bottom of the card"},children:{required:!1,tsType:{name:"ReactNode"},description:"Main content of the card"},motionProps:{required:!1,tsType:{name:"HTMLMotionProps",elements:[{name:"literal",value:'"div"'}],raw:'HTMLMotionProps<"div">'},description:"Additional Framer Motion props for custom animations"},className:{defaultValue:{value:"''",computed:!1},required:!1}},composes:["Omit"]};export{W as C};