@stfrigerio/sito-template 0.1.51 → 0.1.52

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

@@ -0,0 +1,470 @@
+import{r as k,j as e}from"./iframe-LZvJb0BS.js";import{m as W}from"./proxy-94dt0K2Y.js";import"./preload-helper-C1FmrZbK.js";import"./MotionConfigContext-D_4LMwJ5.js";const ze="_calendar_11jmb_2",Ae="_loading_11jmb_14",qe="_loadingSpinner_11jmb_21",We="_header_11jmb_27",Ge="_navigation_11jmb_35",Oe="_navButton_11jmb_41",Ue="_title_11jmb_60",Ye="_controls_11jmb_70",Ke="_todayButton_11jmb_76",Qe="_viewToggle_11jmb_92",Je="_viewButton_11jmb_99",Xe="_active_11jmb_113",Ze="_weekDays_11jmb_123",et="_weekNumberHeader_11jmb_134",tt="_weekDay_11jmb_123",nt="_daysGrid_11jmb_151",at="_weekView_11jmb_162",it="_dayCell_11jmb_166",ot="_dayNumber_11jmb_195",st="_today_11jmb_76",rt="_events_11jmb_214",dt="_event_11jmb_214",lt="_eventTitle_11jmb_241",ct="_eventTime_11jmb_250",mt="_otherMonth_11jmb_295",pt="_selected_11jmb_300",ut="_compact_11jmb_311",gt="_dots_11jmb_323",vt="_dot_11jmb_323",yt="_dotMore_11jmb_338",ht="_weekNumber_11jmb_134",wt="_completed_11jmb_388",Dt="_completedIcon_11jmb_409",ft="_moreEvents_11jmb_416",xt="_emptyState_11jmb_426",Ct="_dayView_11jmb_436",kt="_dayViewHeader_11jmb_445",_t="_timeColumnHeader_11jmb_455",bt="_dayColumnHeader_11jmb_462",jt="_dayViewScrollContainer_11jmb_471",St="_dayViewContent_11jmb_479",Et="_timeColumn_11jmb_455",Tt="_dayColumn_11jmb_462",Mt="_timeSlot_11jmb_497",Nt="_timeLabel_11jmb_506",$t="_hourSlot_11jmb_512",Bt="_hourLine_11jmb_525",Lt="_dayEvent_11jmb_535",Vt="_dayEventTitle_11jmb_556",Rt="_dayEventTime_11jmb_564",Ht="_currentTimeIndicator_11jmb_576",n={calendar:ze,loading:Ae,loadingSpinner:qe,header:We,navigation:Ge,navButton:Oe,title:Ue,controls:Ye,todayButton:Ke,viewToggle:Qe,viewButton:Je,active:Xe,weekDays:Ze,weekNumberHeader:et,weekDay:tt,daysGrid:nt,weekView:at,dayCell:it,dayNumber:ot,today:st,events:rt,event:dt,eventTitle:lt,eventTime:ct,otherMonth:mt,selected:pt,compact:ut,dots:gt,dot:vt,dotMore:yt,weekNumber:ht,completed:wt,completedIcon:Dt,moreEvents:ft,emptyState:xt,dayView:Ct,dayViewHeader:kt,timeColumnHeader:_t,dayColumnHeader:bt,dayViewScrollContainer:jt,dayViewContent:St,timeColumn:Et,dayColumn:Tt,timeSlot:Mt,timeLabel:Nt,hourSlot:$t,hourLine:Bt,dayEvent:Lt,dayEventTitle:Vt,dayEventTime:Rt,currentTimeIndicator:Ht};function f({events:s,onEventClick:c,onDateClick:m,onEventClickByView:h,onDateClickByView:v,onTimeSlotClick:r,viewMode:g="month",initialDate:y=new Date,config:x={},className:D="",style:G={},loading:Ee=!1,emptyState:O,hideHeader:Te=!1,compact:U=!1,selectedDate:Y}){const[p,z]=k.useState(y),[d,A]=k.useState(g),T=k.useRef(null),{eventColors:K={},iconRenderer:M,maxEventsPerDay:_=3,mondayStart:S=!1,showWeekNumbers:Q=!1,dateFormat:J={month:"long",year:"numeric"},locale:b="en-US",dayLabels:Me,monthNames:N}=x,Ne=Me||(S?["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]);k.useEffect(()=>{if(d==="day"&&T.current){const t=new Date;if(p.toDateString()===t.toDateString()){const a=t.getHours(),i=t.getMinutes(),w=(a*60+i)/60*60-100;setTimeout(()=>{T.current&&(T.current.scrollTop=Math.max(0,w))},0)}}},[d,p]);const X=k.useMemo(()=>{const t=p.getFullYear(),o=p.getMonth();let a,i,u;if(d==="week"){a=new Date(p);const l=a.getDay(),C=S?a.getDate()-l+(l===0?-6:1):a.getDate()-l;a=new Date(a.setDate(C)),a.setHours(0,0,0,0),i=new Date(a),i.setDate(i.getDate()+6);const E=a.toLocaleDateString(b,{day:"numeric",month:"short"}),q=i.toLocaleDateString(b,{day:"numeric",month:"short"});u=`${E} - ${q}`}else if(d==="day")a=new Date(p),a.setHours(0,0,0,0),i=new Date(p),i.setHours(23,59,59,999),u=p.toLocaleDateString(b,{weekday:"long",year:"numeric",month:"long",day:"numeric"});else{const l=new Date(t,o,1),C=new Date(t,o+1,0);a=new Date(l);const E=S?(l.getDay()+6)%7:l.getDay();a.setDate(a.getDate()-E),i=new Date(C);const q=S?(C.getDay()+6)%7:C.getDay();i.setDate(i.getDate()+(6-q)),N&&N[o]?u=`${N[o]} ${t}`:u=p.toLocaleDateString(b,J)}const w=[],j=new Date(a);for(;j<=i;)w.push(new Date(j)),j.setDate(j.getDate()+1);return{days:w,displayTitle:u}},[p,d,S,b,J,N]),Z=t=>{const o=s.filter(a=>new Date(a.date).toDateString()===t.toDateString());return d==="week"?o.sort((a,i)=>{const u=a.time?ee(a.time):999999,w=i.time?ee(i.time):999999;return u-w}):o},ee=t=>{const[o,a]=t.split(":").map(Number);return o*60+a},$e=()=>{const t=new Date(p);d==="week"?t.setDate(t.getDate()-7):d==="day"?t.setDate(t.getDate()-1):t.setMonth(t.getMonth()-1),z(t)},Be=()=>{const t=new Date(p);d==="week"?t.setDate(t.getDate()+7):d==="day"?t.setDate(t.getDate()+1):t.setMonth(t.getMonth()+1),z(t)},Le=()=>{z(new Date)},$=t=>{if(t.color)return t.color;if(t.type&&K[t.type])return K[t.type];const o={high:"#FF4444",medium:"#FFA500",low:"#4A90E2"};return t.priority&&o[t.priority]?o[t.priority]:"#4A90E2"},Ve=t=>{const o=t.replace("#",""),a=parseInt(o.substring(0,2),16),i=parseInt(o.substring(2,4),16),u=parseInt(o.substring(4,6),16);return(.299*a+.587*i+.114*u)/255>.5?"#000000":"#FFFFFF"},te=t=>{if(t.textColor)return t.textColor;const o=$(t);return Ve(o)},ne=t=>{h&&h[d]?h[d](t):c&&c(t)},Re=t=>{v&&v[d]?v[d](t):m&&m(t)},He=t=>{if(r){const o=new Date(p);o.setHours(t,0,0,0);const a=`${t.toString().padStart(2,"0")}:00`;r(o,t,a)}},Ie=t=>{const o=new Date;return t.toDateString()===o.toDateString()},Pe=t=>t.getMonth()===p.getMonth(),Fe=t=>{const o=new Date(t.getFullYear(),0,1),a=t.getTime()-o.getTime(),i=1e3*60*60*24*7;return Math.floor(a/i)+1};return Ee?e.jsx("div",{className:`${n.calendar} ${n.loading} ${D}`,style:G,children:e.jsx("div",{className:n.loadingSpinner,children:"Loading..."})}):e.jsxs("div",{className:`${n.calendar} ${U?n.compact:""} ${D}`,style:G,children:[!Te&&e.jsxs("div",{className:n.header,children:[e.jsxs("div",{className:n.navigation,children:[e.jsx("button",{onClick:$e,className:n.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:n.title,children:X.displayTitle}),e.jsx("button",{onClick:Be,className:n.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:n.controls,children:[e.jsx("button",{onClick:Le,className:n.todayButton,children:"Today"}),e.jsxs("div",{className:n.viewToggle,children:[e.jsx("button",{className:`${n.viewButton} ${d==="month"?n.active:""}`,onClick:()=>A("month"),children:"Month"}),e.jsx("button",{className:`${n.viewButton} ${d==="week"?n.active:""}`,onClick:()=>A("week"),children:"Week"}),e.jsx("button",{className:`${n.viewButton} ${d==="day"?n.active:""}`,onClick:()=>A("day"),children:"Day"})]})]})]}),d!=="day"&&e.jsxs("div",{className:n.weekDays,children:[Q&&e.jsx("div",{className:n.weekNumberHeader,children:"Week"}),Ne.map(t=>e.jsx("div",{className:n.weekDay,children:t},t))]}),d==="day"?e.jsxs("div",{className:n.dayView,children:[e.jsxs("div",{className:n.dayViewHeader,children:[e.jsx("div",{className:n.timeColumnHeader}),e.jsx("div",{className:n.dayColumnHeader,children:p.toLocaleDateString(b,{weekday:"short",day:"numeric"})})]}),e.jsx("div",{className:n.dayViewScrollContainer,ref:T,children:e.jsxs("div",{className:n.dayViewContent,children:[(()=>{const t=new Date,o=t.getHours(),a=t.getMinutes(),u=(o*60+a)/1440*(24*60);return p.toDateString()===t.toDateString()?e.jsx("div",{className:n.currentTimeIndicator,style:{top:`${u}px`}}):null})(),e.jsx("div",{className:n.timeColumn,children:Array.from({length:24},(t,o)=>e.jsx("div",{className:n.timeSlot,children:e.jsxs("span",{className:n.timeLabel,children:[o.toString().padStart(2,"0"),":00"]})},o))}),e.jsx("div",{className:n.dayColumn,children:Array.from({length:24},(t,o)=>{const a=Z(p).filter(i=>i.time?parseInt(i.time.split(":")[0])===o:!1);return e.jsxs("div",{className:n.hourSlot,onClick:i=>{(i.target===i.currentTarget||i.target.classList.contains(n.hourLine))&&He(o)},style:{cursor:"pointer"},children:[e.jsx("div",{className:n.hourLine}),a.map((i,u)=>e.jsxs(W.div,{className:`${n.dayEvent} ${i.status==="completed"?n.completed:""}`,style:{backgroundColor:$(i),color:te(i),opacity:i.status==="completed"?.7:1},onClick:w=>{w.stopPropagation(),ne(i)},initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{duration:.2,delay:u*.05,ease:"easeOut"},whileHover:{scale:1.02,y:-1,transition:{duration:.1}},whileTap:{scale:.98,transition:{duration:.1}},children:[M&&M(i),e.jsxs("span",{className:n.dayEventTitle,children:[e.jsx("span",{className:n.dayEventTime,children:i.time}),i.title]}),i.status==="completed"&&e.jsx("svg",{className:n.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"})})]},i.id))]},o)})})]})})]}):e.jsx("div",{className:`${n.daysGrid} ${d==="week"?n.weekView:""}`,children:X.days.map((t,o)=>{const a=Z(t),i=Ie(t),u=d==="week"||Pe(t),w=Q&&o%7===0,j=Y&&t.toDateString()===Y.toDateString();return e.jsxs(W.div,{className:`${n.dayCell} ${i?n.today:""} ${u?"":n.otherMonth} ${j?n.selected:""}`,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.3,delay:o*.02,ease:"easeOut"},onClick:()=>Re(t),children:[w&&e.jsx("div",{className:n.weekNumber,children:Fe(t)}),e.jsx("div",{className:n.dayNumber,children:t.getDate()}),a.length>0&&U&&d==="month"?e.jsxs("div",{className:n.dots,children:[a.slice(0,_).map(l=>e.jsx("span",{className:n.dot,style:{backgroundColor:$(l)}},l.id)),a.length>_&&e.jsxs("span",{className:n.dotMore,children:["+",a.length-_]})]}):a.length>0?e.jsxs("div",{className:n.events,children:[a.slice(0,_).map((l,C)=>e.jsxs(W.div,{className:`${n.event} ${l.status==="completed"?n.completed:""}`,style:{backgroundColor:$(l),color:te(l),opacity:l.status==="completed"?.7:1},onClick:E=>{E.stopPropagation(),ne(l)},initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{duration:.2,delay:C*.05,ease:"easeOut"},whileHover:{scale:1.02,y:-1,transition:{duration:.1}},whileTap:{scale:.98,transition:{duration:.1}},children:[M&&M(l),e.jsxs("span",{className:n.eventTitle,children:[l.time&&e.jsx("span",{className:n.eventTime,children:l.time}),l.title]}),l.status==="completed"&&e.jsx("svg",{className:n.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"})})]},l.id)),a.length>_&&e.jsxs("div",{className:n.moreEvents,children:["+",a.length-_," more"]})]}):O?e.jsx("div",{className:n.emptyState,children:O}):null]},`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`)})})]})}f.__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"},onEventClickByView:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+    month?: (event: CalendarEvent) => void;
+    week?: (event: CalendarEvent) => void;
+    day?: (event: CalendarEvent) => void;
+}`,signature:{properties:[{key:"month",value:{name:"signature",type:"function",raw:"(event: CalendarEvent) => void",signature:{arguments:[{type:{name:"CalendarEvent"},name:"event"}],return:{name:"void"}},required:!1}},{key:"week",value:{name:"signature",type:"function",raw:"(event: CalendarEvent) => void",signature:{arguments:[{type:{name:"CalendarEvent"},name:"event"}],return:{name:"void"}},required:!1}},{key:"day",value:{name:"signature",type:"function",raw:"(event: CalendarEvent) => void",signature:{arguments:[{type:{name:"CalendarEvent"},name:"event"}],return:{name:"void"}},required:!1}}]}},description:"View-specific event click handlers"},onDateClickByView:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+    month?: (date: Date) => void;
+    week?: (date: Date) => void;
+    day?: (date: Date) => void;
+}`,signature:{properties:[{key:"month",value:{name:"signature",type:"function",raw:"(date: Date) => void",signature:{arguments:[{type:{name:"Date"},name:"date"}],return:{name:"void"}},required:!1}},{key:"week",value:{name:"signature",type:"function",raw:"(date: Date) => void",signature:{arguments:[{type:{name:"Date"},name:"date"}],return:{name:"void"}},required:!1}},{key:"day",value:{name:"signature",type:"function",raw:"(date: Date) => void",signature:{arguments:[{type:{name:"Date"},name:"date"}],return:{name:"void"}},required:!1}}]}},description:"View-specific date click handlers"},onTimeSlotClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(date: Date, hour: number, time: string) => void",signature:{arguments:[{type:{name:"Date"},name:"date"},{type:{name:"number"},name:"hour"},{type:{name:"string"},name:"time"}],return:{name:"void"}}},description:"Callback when a time slot is clicked in day view"},viewMode:{required:!1,tsType:{name:"union",raw:"'month' | 'week' | 'day'",elements:[{name:"literal",value:"'month'"},{name:"literal",value:"'week'"},{name:"literal",value:"'day'"}]},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"},hideHeader:{required:!1,tsType:{name:"boolean"},description:"Hide the calendar header (navigation, title, view controls)",defaultValue:{value:"false",computed:!1}},compact:{required:!1,tsType:{name:"boolean"},description:"Compact mode - renders colored dots instead of event blocks in month view",defaultValue:{value:"false",computed:!1}},selectedDate:{required:!1,tsType:{name:"Date"},description:"Externally controlled selected date highlight (distinct from initialDate which controls navigation)"}}};const qt={title:"Organisms/Calendar",component:f,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"}}},Se=()=>{const s=new Date,c=[];for(let r=0;r<12;r++){const g=new Date(s);g.setDate(s.getDate()+Math.floor(Math.random()*30)-15),c.push({id:`event-${r}`,title:`Event ${r+1}`,date:g,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)]})}const m=["Daily Standup","Sprint Retro","Code Review: Auth","Code Review: Payments","1:1 with Manager","Architecture Review","Lunch & Learn","Client Demo","Bug Triage","Design Critique","Interview (Sr. FE)","Interview (BE)","Security Debrief","Deploy to Staging","QA Sign-off","Prod Go/No-Go","Team Happy Hour","Write Summary"],h=["meeting","meeting","task","task","meeting","meeting","milestone","deadline","task","meeting","meeting","meeting","meeting","deadline","meeting","milestone","task","task"],v=["medium","medium","high","high","medium","high","low","high","medium","medium","high","high","high","high","medium","high","low","low"];for(let r=0;r<m.length;r++)c.push({id:`busy-${r}`,title:m[r],date:new Date(s),time:`${6+Math.floor(r*13/m.length)}:${r%2===0?"00":"30"}`,type:h[r],status:r<5?"completed":"pending",priority:v[r]});return c},B={args:{events:Se(),viewMode:"month"}},L={args:{events:Se(),viewMode:"week"}},V={args:{events:[{id:"1",title:"Morning Standup",date:new Date,time:"09:00",type:"meeting",status:"pending",priority:"high"},{id:"2",title:"Code Review",date:new Date,time:"10:30",type:"task",status:"pending",priority:"medium"},{id:"3",title:"Lunch Break",date:new Date,time:"12:00",type:"break",status:"pending",priority:"low"},{id:"4",title:"Team Sync",date:new Date,time:"14:00",type:"meeting",status:"completed",priority:"medium"},{id:"5",title:"Development Work",date:new Date,time:"15:30",type:"task",status:"pending",priority:"high"},{id:"6",title:"Documentation",date:new Date,time:"17:00",type:"task",status:"pending",priority:"low"}],viewMode:"day"}},R={args:{events:[]},render:()=>{const[s,c]=k.useState([{id:"1",title:"Sprint Planning",date:new Date,time:"09:00",type:"meeting",status:"pending",priority:"high"},{id:"2",title:"Code Review",date:new Date(Date.now()+864e5),time:"14:30",type:"review",status:"completed",priority:"medium"},{id:"3",title:"Design Sprint",date:new Date(Date.now()+1728e5),type:"workshop",status:"pending",priority:"medium"}]),[m,h]=k.useState([]),v=g=>{const y=new Date().toLocaleTimeString();c(x=>x.map(D=>D.id===g.id?{...D,status:D.status==="completed"?"pending":"completed"}:D)),h(x=>[`[${y}] 🔄 Toggled "${g.title}" status`,...x.slice(0,4)])},r=g=>{const y=new Date().toLocaleTimeString(),x={id:`new-${Date.now()}`,title:"New Event",date:g,time:"15:00",type:"meeting",status:"pending",priority:"medium"};c(D=>[...D,x]),h(D=>[`[${y}] ➕ Added event on ${g.toLocaleDateString()}`,...D.slice(0,4)])};return e.jsxs("div",{children:[e.jsxs("div",{style:{padding:"var(--spacing-md)",background:"var(--color-primary-light)",borderRadius:"var(--radius-md)",marginBottom:"var(--spacing-lg)"},children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-xs) 0",color:"var(--color-primary)"},children:"🎯 Interactive Demo"}),e.jsx("p",{style:{margin:0,fontSize:"var(--font-size-sm)",color:"var(--color-text-secondary)"},children:"• Click events to toggle status • Click dates to add new events"})]}),e.jsx(f,{events:s,onEventClick:v,onDateClick:r,config:{eventColors:{meeting:"#4A90E2",review:"#BD10E0",workshop:"#4ECDC4"},iconRenderer:g=>{const y={meeting:"👥",review:"👀",workshop:"🎨"};return e.jsx("span",{style:{fontSize:"11px"},children:y[g.type]||"📅"})}},viewMode:"month"}),m.length>0&&e.jsxs("div",{style:{marginTop:"var(--spacing-lg)",padding:"var(--spacing-md)",background:"var(--color-background-secondary)",borderRadius:"var(--radius-md)"},children:[e.jsx("h5",{style:{margin:"0 0 var(--spacing-sm) 0",color:"var(--color-text)"},children:"Recent Actions:"}),m.map((g,y)=>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:g},y))]})]})}},H={args:{events:[]},render:()=>{const s=[],c=new Date,m=["Exercise","Meditation","Reading","Water","Sleep"],h=["💪","🧘","📚","💧","😴"];for(let v=-7;v<=7;v++){const r=new Date(c);r.setDate(c.getDate()+v),m.forEach((g,y)=>{Math.random()>.3&&s.push({id:`habit-${v}-${y}`,title:g,date:new Date(r),type:"habit",status:Math.random()>.1?"completed":"pending",color:`hsl(${y*70}, 70%, 50%)`,metadata:{icon:h[y]}})})}return e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text)"},children:"🎯 Habit Tracking Use Case"}),e.jsx(f,{events:s,config:{iconRenderer:v=>{var r;return e.jsx("span",{style:{fontSize:"10px"},children:((r=v.metadata)==null?void 0:r.icon)||"✓"})},maxEventsPerDay:8,mondayStart:!0},viewMode:"month"})]})}},I={args:{events:[]},render:()=>{const s=new Date,c=[{id:"schedule-1",title:"Team Standup and a very long text for a task that never ends",date:new Date(s.getTime()-(s.getDay()-1)*24*60*60*1e3),time:"09:00",type:"meeting",status:"pending",priority:"medium"},{id:"schedule-2",title:"Code Review",date:new Date(s.getTime()-(s.getDay()-1)*24*60*60*1e3),time:"11:30",type:"review",status:"completed",priority:"high"},{id:"schedule-3",title:"Client Call",date:new Date(s.getTime()-(s.getDay()-2)*24*60*60*1e3),time:"10:00",type:"call",status:"pending",priority:"high"},{id:"schedule-4",title:"Sprint Planning",date:new Date(s.getTime()-(s.getDay()-2)*24*60*60*1e3),time:"14:00",type:"meeting",status:"pending",priority:"high"},{id:"schedule-5",title:"Demo Day",date:new Date(s.getTime()-(s.getDay()-5)*24*60*60*1e3),time:"13:00",type:"presentation",status:"pending",priority:"high"}];return e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"var(--spacing-md)",color:"var(--color-text)"},children:"📅 Event Scheduling (Week View)"}),e.jsx(f,{events:c,config:{eventColors:{meeting:"#4A90E2",call:"#7ED321",review:"#BD10E0",presentation:"#FF6B6B"},iconRenderer:m=>{const h={meeting:"👥",call:"📞",review:"👀",presentation:"🎯"};return e.jsx("span",{style:{fontSize:"12px"},children:h[m.type]||"📅"})},maxEventsPerDay:6,mondayStart:!0},viewMode:"week"})]})}},P={args:{events:[]},render:()=>{const s=[{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(f,{events:s,config:{eventColors:{vip:"#FF6B6B",workshop:"#4ECDC4",milestone:"#F39C12"},iconRenderer:c=>c.type==="vip"?e.jsx("span",{style:{fontSize:"12px"},children:"⭐"}):c.type==="workshop"?e.jsx("span",{style:{fontSize:"12px"},children:"🎨"}):c.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"})]})}},F={args:{events:[]},render:()=>{const s=[],c=new Date;for(let m=0;m<6;m++)s.push({id:`many-${m}`,title:`Meeting ${m+1}`,date:c,time:`${9+m}:00`,type:"meeting",status:"pending",priority:"medium"});return e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-xl)"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:'📊 Many Events (shows "more" indicator)'}),e.jsx(f,{events:s,config:{maxEventsPerDay:3},viewMode:"month"})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:"💨 Loading State"}),e.jsx(f,{events:[],loading:!0})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{margin:"0 0 var(--spacing-md) 0",color:"var(--color-text)"},children:"📭 Empty State"}),e.jsx(f,{events:[],emptyState:e.jsx("span",{style:{color:"var(--color-text-tertiary)",fontSize:"11px"},children:"No events"})})]})]})}};var ae,ie,oe;B.parameters={...B.parameters,docs:{...(ae=B.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  args: {
+    events: generateSampleEvents(),
+    viewMode: 'month'
+  }
+}`,...(oe=(ie=B.parameters)==null?void 0:ie.docs)==null?void 0:oe.source}}};var se,re,de;L.parameters={...L.parameters,docs:{...(se=L.parameters)==null?void 0:se.docs,source:{originalSource:`{
+  args: {
+    events: generateSampleEvents(),
+    viewMode: 'week'
+  }
+}`,...(de=(re=L.parameters)==null?void 0:re.docs)==null?void 0:de.source}}};var le,ce,me;V.parameters={...V.parameters,docs:{...(le=V.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  args: {
+    events: [{
+      id: '1',
+      title: 'Morning Standup',
+      date: new Date(),
+      time: '09:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: '2',
+      title: 'Code Review',
+      date: new Date(),
+      time: '10:30',
+      type: 'task',
+      status: 'pending',
+      priority: 'medium'
+    }, {
+      id: '3',
+      title: 'Lunch Break',
+      date: new Date(),
+      time: '12:00',
+      type: 'break',
+      status: 'pending',
+      priority: 'low'
+    }, {
+      id: '4',
+      title: 'Team Sync',
+      date: new Date(),
+      time: '14:00',
+      type: 'meeting',
+      status: 'completed',
+      priority: 'medium'
+    }, {
+      id: '5',
+      title: 'Development Work',
+      date: new Date(),
+      time: '15:30',
+      type: 'task',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: '6',
+      title: 'Documentation',
+      date: new Date(),
+      time: '17:00',
+      type: 'task',
+      status: 'pending',
+      priority: 'low'
+    }],
+    viewMode: 'day'
+  }
+}`,...(me=(ce=V.parameters)==null?void 0:ce.docs)==null?void 0:me.source}}};var pe,ue,ge;R.parameters={...R.parameters,docs:{...(pe=R.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    events: []
+  },
+  render: () => {
+    const [events, setEvents] = useState<CalendarEvent[]>([{
+      id: '1',
+      title: 'Sprint Planning',
+      date: new Date(),
+      time: '09:00',
+      type: 'meeting',
+      status: 'pending',
+      priority: 'high'
+    }, {
+      id: '2',
+      title: 'Code Review',
+      date: new Date(Date.now() + 24 * 60 * 60 * 1000),
+      time: '14:30',
+      type: 'review',
+      status: 'completed',
+      priority: 'medium'
+    }, {
+      id: '3',
+      title: 'Design Sprint',
+      date: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000),
+      type: 'workshop',
+      status: 'pending',
+      priority: 'medium'
+    }]);
+    const [actionLog, setActionLog] = useState<string[]>([]);
+    const handleEventClick = (event: CalendarEvent) => {
+      const timestamp = new Date().toLocaleTimeString();
+
+      // Toggle status and log action
+      setEvents(prev => prev.map(e => e.id === event.id ? {
+        ...e,
+        status: e.status === 'completed' ? 'pending' : 'completed'
+      } : e));
+      setActionLog(prev => [\`[\${timestamp}] 🔄 Toggled "\${event.title}" status\`, ...prev.slice(0, 4) // Keep only last 5 logs
+      ]);
+    };
+    const handleDateClick = (date: Date) => {
+      const timestamp = new Date().toLocaleTimeString();
+      const newEvent: CalendarEvent = {
+        id: \`new-\${Date.now()}\`,
+        title: 'New Event',
+        date: date,
+        time: '15:00',
+        type: 'meeting',
+        status: 'pending',
+        priority: 'medium'
+      };
+      setEvents(prev => [...prev, newEvent]);
+      setActionLog(prev => [\`[\${timestamp}] ➕ Added event on \${date.toLocaleDateString()}\`, ...prev.slice(0, 4)]);
+    };
+    return <div>
+                <div style={{
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-primary-light)',
+        borderRadius: 'var(--radius-md)',
+        marginBottom: 'var(--spacing-lg)'
+      }}>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-xs) 0',
+          color: 'var(--color-primary)'
+        }}>
+                        🎯 Interactive Demo
+                    </h4>
+                    <p style={{
+          margin: 0,
+          fontSize: 'var(--font-size-sm)',
+          color: 'var(--color-text-secondary)'
+        }}>
+                        • Click events to toggle status • Click dates to add new events
+                    </p>
+                </div>
+
+                <Calendar events={events} onEventClick={handleEventClick} onDateClick={handleDateClick} config={{
+        eventColors: {
+          meeting: '#4A90E2',
+          review: '#BD10E0',
+          workshop: '#4ECDC4'
+        },
+        iconRenderer: event => {
+          const icons = {
+            meeting: '👥',
+            review: '👀',
+            workshop: '🎨'
+          };
+          return <span style={{
+            fontSize: '11px'
+          }}>{icons[event.type as keyof typeof icons] || '📅'}</span>;
+        }
+      }} viewMode="month" />
+
+                {actionLog.length > 0 && <div style={{
+        marginTop: 'var(--spacing-lg)',
+        padding: 'var(--spacing-md)',
+        background: 'var(--color-background-secondary)',
+        borderRadius: 'var(--radius-md)'
+      }}>
+                        <h5 style={{
+          margin: '0 0 var(--spacing-sm) 0',
+          color: 'var(--color-text)'
+        }}>
+                            Recent Actions:
+                        </h5>
+                        {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>;
+  }
+}`,...(ge=(ue=R.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var ve,ye,he;H.parameters={...H.parameters,docs:{...(ve=H.parameters)==null?void 0:ve.docs,source:{originalSource:`{
+  args: {
+    events: []
+  },
+  render: () => {
+    const habitEvents: CalendarEvent[] = [];
+    const today = new Date();
+    const habits = ['Exercise', 'Meditation', 'Reading', 'Water', 'Sleep'];
+    const habitIcons = ['💪', '🧘', '📚', '💧', '😴'];
+    for (let i = -7; i <= 7; i++) {
+      const date = new Date(today);
+      date.setDate(today.getDate() + i);
+      habits.forEach((habit, index) => {
+        if (Math.random() > 0.3) {
+          // 70% completion rate
+          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 <div>
+                <h3 style={{
+        marginBottom: 'var(--spacing-md)',
+        color: 'var(--color-text)'
+      }}>
+                    🎯 Habit Tracking Use Case
+                </h3>
+                <Calendar events={habitEvents} config={{
+        iconRenderer: event => <span style={{
+          fontSize: '10px'
+        }}>{event.metadata?.icon as string || '✓'}</span>,
+        maxEventsPerDay: 8,
+        mondayStart: true
+      }} viewMode="month" />
+            </div>;
+  }
+}`,...(he=(ye=H.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var we,De,fe;I.parameters={...I.parameters,docs:{...(we=I.parameters)==null?void 0:we.docs,source:{originalSource:`{
+  args: {
+    events: []
+  },
+  render: () => {
+    const today = new Date();
+    const scheduleEvents: CalendarEvent[] = [
+    // Monday
+    {
+      id: 'schedule-1',
+      title: 'Team Standup and a very long text for a task that never ends',
+      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'
+    },
+    // Friday
+    {
+      id: 'schedule-5',
+      title: 'Demo Day',
+      date: new Date(today.getTime() - (today.getDay() - 5) * 24 * 60 * 60 * 1000),
+      time: '13:00',
+      type: 'presentation',
+      status: 'pending',
+      priority: 'high'
+    }];
+    return <div>
+                <h3 style={{
+        marginBottom: 'var(--spacing-md)',
+        color: 'var(--color-text)'
+      }}>
+                    📅 Event Scheduling (Week View)
+                </h3>
+                <Calendar events={scheduleEvents} config={{
+        eventColors: {
+          meeting: '#4A90E2',
+          call: '#7ED321',
+          review: '#BD10E0',
+          presentation: '#FF6B6B'
+        },
+        iconRenderer: event => {
+          const icons = {
+            meeting: '👥',
+            call: '📞',
+            review: '👀',
+            presentation: '🎯'
+          };
+          return <span style={{
+            fontSize: '12px'
+          }}>{icons[event.type as keyof typeof icons] || '📅'}</span>;
+        },
+        maxEventsPerDay: 6,
+        mondayStart: true
+      }} viewMode="week" />
+            </div>;
+  }
+}`,...(fe=(De=I.parameters)==null?void 0:De.docs)==null?void 0:fe.source}}};var xe,Ce,ke;P.parameters={...P.parameters,docs:{...(xe=P.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  args: {
+    events: []
+  },
+  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>;
+  }
+}`,...(ke=(Ce=P.parameters)==null?void 0:Ce.docs)==null?void 0:ke.source}}};var _e,be,je;F.parameters={...F.parameters,docs:{...(_e=F.parameters)==null?void 0:_e.docs,source:{originalSource:`{
+  args: {
+    events: []
+  },
+  render: () => {
+    const manyEvents: CalendarEvent[] = [];
+    const today = new Date();
+
+    // Generate multiple events for a single day
+    for (let i = 0; i < 6; i++) {
+      manyEvents.push({
+        id: \`many-\${i}\`,
+        title: \`Meeting \${i + 1}\`,
+        date: today,
+        time: \`\${9 + i}:00\`,
+        type: 'meeting',
+        status: 'pending',
+        priority: 'medium'
+      });
+    }
+    return <div style={{
+      display: 'grid',
+      gap: 'var(--spacing-xl)'
+    }}>
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        📊 Many Events (shows "more" indicator)
+                    </h4>
+                    <Calendar events={manyEvents} config={{
+          maxEventsPerDay: 3
+        }} viewMode="month" />
+                </div>
+
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        💨 Loading State
+                    </h4>
+                    <Calendar events={[]} loading={true} />
+                </div>
+
+                <div>
+                    <h4 style={{
+          margin: '0 0 var(--spacing-md) 0',
+          color: 'var(--color-text)'
+        }}>
+                        📭 Empty State
+                    </h4>
+                    <Calendar events={[]} emptyState={<span style={{
+          color: 'var(--color-text-tertiary)',
+          fontSize: '11px'
+        }}>
+                                No events
+                            </span>} />
+                </div>
+            </div>;
+  }
+}`,...(je=(be=F.parameters)==null?void 0:be.docs)==null?void 0:je.source}}};const Wt=["MonthView","WeekView","DayView","ClickInteractions","HabitTracker","EventScheduler","CustomConfiguration","ComponentStates"];export{R as ClickInteractions,F as ComponentStates,P as CustomConfiguration,V as DayView,I as EventScheduler,H as HabitTracker,B as MonthView,L as WeekView,Wt as __namedExportsOrder,qt as default};

package/storybook-static/assets/{Card-DZVLYsdd.js → Card--7bShmQv.js}

@@ -1,4 +1,4 @@
-import{r as I,j as e}from"./iframe-CvT6MryR.js";import{A as M}from"./index-2ZuXCVEx.js";import{m as _}from"./proxy-0exJiild.js";const B="_card_k0xft_1",V="_hoverable_k0xft_50",A="_elevated_k0xft_65",L="_outlined_k0xft_78",S="_flat_k0xft_111",E="_glass_k0xft_156",W="_imageContainer_k0xft_187",F="_image_k0xft_187",H="_header_k0xft_233",R="_headerContent_k0xft_248",O="_expandButton_k0xft_254",D="_expandIcon_k0xft_285",J="_expandableContent_k0xft_289",U="_expandable_k0xft_289",X="_body_k0xft_313",z="_footer_k0xft_319",G="_title_k0xft_350",K="_subtitle_k0xft_366",Q="_clickable_k0xft_380",Y="_padding_k0xft_394",Z="_noPadding_k0xft_398",$="_loading_k0xft_403",ee="_loadingShimmer_k0xft_1",ae="_loadingPulse_k0xft_1",a={card:B,hoverable:V,elevated:A,outlined:L,flat:S,glass:E,imageContainer:W,image:F,header:H,headerContent:R,expandButton:O,expandIcon:D,expandableContent:J,expandable:U,body:X,footer:z,title:G,subtitle:K,clickable:Q,padding:Y,noPadding:Z,loading:$,loadingShimmer:ee,loadingPulse:ae},te=({variant:g="elevated",hoverable:d=!1,clickable:l=!1,padding:c=!0,image:p,imageAlt:v="",title:o,subtitle:s,header:u,footer:m,children:f,expandable:t=!1,defaultExpanded:C=!1,expanded:i,onExpandChange:r,className:b="",onClick:k,motionProps:y,...j})=>{const[T,N]=I.useState(C),n=i!==void 0?i:T,h=()=>{const x=!n;i===void 0&&N(x),r==null||r(x)},q=[a.card,a[g],d&&a.hoverable,l&&a.clickable,!c&&a.noPadding,t&&a.expandable,b].filter(Boolean).join(" "),w=()=>u?e.jsxs("div",{className:a.header,children:[e.jsx("div",{className:a.headerContent,children:u}),t&&e.jsx("button",{className:a.expandButton,onClick:h,"aria-label":n?"Collapse card":"Expand card",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a.expandIcon,style:{transform:n?"rotate(180deg)":"rotate(0deg)"},children:e.jsx("path",{d:"M6 9l6 6 6-6"})})})]}):o||s?e.jsxs("div",{className:a.header,children:[e.jsxs("div",{className:a.headerContent,children:[o&&e.jsx("h3",{className:a.title,children:o}),s&&e.jsx("p",{className:a.subtitle,children:s})]}),t&&e.jsx("button",{className:a.expandButton,onClick:h,"aria-label":n?"Collapse card":"Expand card",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a.expandIcon,style:{transform:n?"rotate(180deg)":"rotate(0deg)"},children:e.jsx("path",{d:"M6 9l6 6 6-6"})})})]}):null,P=e.jsxs(e.Fragment,{children:[p&&e.jsx("div",{className:a.imageContainer,children:e.jsx("img",{src:p,alt:v,className:a.image})}),w(),e.jsx(M,{initial:!1,children:(!t||n)&&e.jsxs(_.div,{initial:t?{height:0,opacity:0}:void 0,animate:t?{height:"auto",opacity:1}:void 0,exit:t?{height:0,opacity:0}:void 0,transition:{duration:.3,ease:"easeInOut"},className:a.expandableContent,children:[f&&e.jsx("div",{className:c?a.body:void 0,children:f}),m&&e.jsx("div",{className:a.footer,children:m})]},"content")})]});return e.jsx(_.div,{className:q,onClick:l?k:void 0,whileHover:d?{y:-4}:void 0,transition:{type:"spring",stiffness:400,damping:17},...y,...j,children:P})};te.__docgenInfo={description:`Card Component
+import{r as I,j as e}from"./iframe-LZvJb0BS.js";import{A as M}from"./index-vc18hLoj.js";import{m as _}from"./proxy-94dt0K2Y.js";const B="_card_k0xft_1",V="_hoverable_k0xft_50",A="_elevated_k0xft_65",L="_outlined_k0xft_78",S="_flat_k0xft_111",E="_glass_k0xft_156",W="_imageContainer_k0xft_187",F="_image_k0xft_187",H="_header_k0xft_233",R="_headerContent_k0xft_248",O="_expandButton_k0xft_254",D="_expandIcon_k0xft_285",J="_expandableContent_k0xft_289",U="_expandable_k0xft_289",X="_body_k0xft_313",z="_footer_k0xft_319",G="_title_k0xft_350",K="_subtitle_k0xft_366",Q="_clickable_k0xft_380",Y="_padding_k0xft_394",Z="_noPadding_k0xft_398",$="_loading_k0xft_403",ee="_loadingShimmer_k0xft_1",ae="_loadingPulse_k0xft_1",a={card:B,hoverable:V,elevated:A,outlined:L,flat:S,glass:E,imageContainer:W,image:F,header:H,headerContent:R,expandButton:O,expandIcon:D,expandableContent:J,expandable:U,body:X,footer:z,title:G,subtitle:K,clickable:Q,padding:Y,noPadding:Z,loading:$,loadingShimmer:ee,loadingPulse:ae},te=({variant:g="elevated",hoverable:d=!1,clickable:l=!1,padding:c=!0,image:p,imageAlt:v="",title:o,subtitle:s,header:u,footer:m,children:f,expandable:t=!1,defaultExpanded:C=!1,expanded:i,onExpandChange:r,className:b="",onClick:k,motionProps:y,...j})=>{const[T,N]=I.useState(C),n=i!==void 0?i:T,h=()=>{const x=!n;i===void 0&&N(x),r==null||r(x)},q=[a.card,a[g],d&&a.hoverable,l&&a.clickable,!c&&a.noPadding,t&&a.expandable,b].filter(Boolean).join(" "),w=()=>u?e.jsxs("div",{className:a.header,children:[e.jsx("div",{className:a.headerContent,children:u}),t&&e.jsx("button",{className:a.expandButton,onClick:h,"aria-label":n?"Collapse card":"Expand card",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a.expandIcon,style:{transform:n?"rotate(180deg)":"rotate(0deg)"},children:e.jsx("path",{d:"M6 9l6 6 6-6"})})})]}):o||s?e.jsxs("div",{className:a.header,children:[e.jsxs("div",{className:a.headerContent,children:[o&&e.jsx("h3",{className:a.title,children:o}),s&&e.jsx("p",{className:a.subtitle,children:s})]}),t&&e.jsx("button",{className:a.expandButton,onClick:h,"aria-label":n?"Collapse card":"Expand card",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a.expandIcon,style:{transform:n?"rotate(180deg)":"rotate(0deg)"},children:e.jsx("path",{d:"M6 9l6 6 6-6"})})})]}):null,P=e.jsxs(e.Fragment,{children:[p&&e.jsx("div",{className:a.imageContainer,children:e.jsx("img",{src:p,alt:v,className:a.image})}),w(),e.jsx(M,{initial:!1,children:(!t||n)&&e.jsxs(_.div,{initial:t?{height:0,opacity:0}:void 0,animate:t?{height:"auto",opacity:1}:void 0,exit:t?{height:0,opacity:0}:void 0,transition:{duration:.3,ease:"easeInOut"},className:a.expandableContent,children:[f&&e.jsx("div",{className:c?a.body:void 0,children:f}),m&&e.jsx("div",{className:a.footer,children:m})]},"content")})]});return e.jsx(_.div,{className:q,onClick:l?k:void 0,whileHover:d?{y:-4}:void 0,transition:{type:"spring",stiffness:400,damping:17},...y,...j,children:P})};te.__docgenInfo={description:`Card Component
 
 @component
 @description

package/storybook-static/assets/{Card.stories-DisHmL7k.js → Card.stories-C9cPoCVI.js}

@@ -1,4 +1,4 @@
-import{j as e,r as T}from"./iframe-CvT6MryR.js";import{C as a}from"./Card-DZVLYsdd.js";import{B as t}from"./Button-2CSvbnXB.js";import"./preload-helper-C1FmrZbK.js";import"./index-2ZuXCVEx.js";import"./proxy-0exJiild.js";import"./MotionConfigContext-BdSKNtzx.js";import"./useSound-DyOR6GVH.js";const D={title:"Atoms/Card",component:a,parameters:{layout:"centered",docs:{description:{component:"A flexible container component with various styling options and animation support."}}},tags:["autodocs"],argTypes:{variant:{control:"select",options:["elevated","outlined","flat","glass"],description:"Visual style variant of the card"},padding:{control:"boolean"},hoverable:{control:"boolean"},clickable:{control:"boolean"},expandable:{control:"boolean"},defaultExpanded:{control:"boolean"},title:{control:"text"},subtitle:{control:"text"},onClick:{action:"clicked"},onExpandChange:{action:"expand-changed"}}},r={args:{title:"Card Title",subtitle:"Optional subtitle",hoverable:!0,children:e.jsx("p",{children:"Card content goes here. Use controls to switch between elevated, outlined, flat, and glass variants."})}},n={args:{variant:"elevated",hoverable:!0,image:"https://via.placeholder.com/350x200",imageAlt:"Feature image",children:e.jsxs("div",{style:{maxWidth:"350px"},children:[e.jsx("h2",{style:{marginBottom:"0.5rem"},children:"Feature Card"}),e.jsx("p",{style:{marginBottom:"1rem",color:"#666"},children:"Image, title, description, and action buttons composed together."}),e.jsxs("div",{style:{display:"flex",gap:"0.5rem"},children:[e.jsx(t,{variant:"primary",size:"small",children:"Learn More"}),e.jsx(t,{variant:"outline",size:"small",children:"Share"})]})]})}},l={render:()=>e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"1rem",maxWidth:"800px"},children:[e.jsxs(a,{variant:"elevated",hoverable:!0,children:[e.jsx("h4",{children:"Elevated"}),e.jsx("p",{children:"With shadow"})]}),e.jsxs(a,{variant:"outlined",hoverable:!0,children:[e.jsx("h4",{children:"Outlined"}),e.jsx("p",{children:"With border"})]}),e.jsxs(a,{variant:"glass",hoverable:!0,children:[e.jsx("h4",{children:"Glass"}),e.jsx("p",{children:"Glassmorphism"})]})]}),parameters:{controls:{disable:!0},layout:"padded"}},s={args:{title:"Expandable Card",subtitle:"Click the arrow to expand",expandable:!0,variant:"outlined",children:e.jsxs("div",{children:[e.jsx("p",{children:"This content is collapsible. Useful for FAQ sections, settings panels, or progressive disclosure."}),e.jsxs("div",{style:{display:"flex",gap:"0.5rem",marginTop:"1rem"},children:[e.jsx(t,{variant:"primary",size:"small",children:"Action"}),e.jsx(t,{variant:"outline",size:"small",children:"Secondary"})]})]})}},i={render:()=>{const[d,p]=T.useState(!1);return e.jsxs("div",{style:{width:"400px"},children:[e.jsxs(a,{title:"Controlled Expandable",subtitle:"State managed externally",expandable:!0,expanded:d,onExpandChange:p,variant:"glass",hoverable:!0,children:[e.jsx("p",{children:"Expanded state is controlled via props."}),e.jsxs("p",{children:["Current: ",e.jsx("strong",{children:d?"Expanded":"Collapsed"})]})]}),e.jsx("div",{style:{marginTop:"1rem",textAlign:"center"},children:e.jsx(t,{variant:"primary",onClick:()=>p(!d),children:"External Toggle"})})]})},parameters:{controls:{disable:!0}}},o={render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",maxWidth:"600px"},children:[e.jsx(a,{title:"Getting Started",expandable:!0,variant:"outlined",children:e.jsx("p",{children:"Create an account and follow the onboarding tutorial to get started."})}),e.jsx(a,{title:"Account Management",expandable:!0,variant:"outlined",children:e.jsx("p",{children:"Manage settings from the profile page: personal info, password, notifications."})}),e.jsx(a,{title:"Billing & Payments",expandable:!0,defaultExpanded:!0,variant:"outlined",children:e.jsx("p",{children:"We accept all major credit cards and PayPal. Billing is monthly or annual."})})]}),parameters:{controls:{disable:!0},layout:"padded"}};var c,m,u;r.parameters={...r.parameters,docs:{...(c=r.parameters)==null?void 0:c.docs,source:{originalSource:`{
+import{j as e,r as T}from"./iframe-LZvJb0BS.js";import{C as a}from"./Card--7bShmQv.js";import{B as t}from"./Button-DK4vPDdE.js";import"./preload-helper-C1FmrZbK.js";import"./index-vc18hLoj.js";import"./proxy-94dt0K2Y.js";import"./MotionConfigContext-D_4LMwJ5.js";import"./useSound-Dc8S51xy.js";const D={title:"Atoms/Card",component:a,parameters:{layout:"centered",docs:{description:{component:"A flexible container component with various styling options and animation support."}}},tags:["autodocs"],argTypes:{variant:{control:"select",options:["elevated","outlined","flat","glass"],description:"Visual style variant of the card"},padding:{control:"boolean"},hoverable:{control:"boolean"},clickable:{control:"boolean"},expandable:{control:"boolean"},defaultExpanded:{control:"boolean"},title:{control:"text"},subtitle:{control:"text"},onClick:{action:"clicked"},onExpandChange:{action:"expand-changed"}}},r={args:{title:"Card Title",subtitle:"Optional subtitle",hoverable:!0,children:e.jsx("p",{children:"Card content goes here. Use controls to switch between elevated, outlined, flat, and glass variants."})}},n={args:{variant:"elevated",hoverable:!0,image:"https://via.placeholder.com/350x200",imageAlt:"Feature image",children:e.jsxs("div",{style:{maxWidth:"350px"},children:[e.jsx("h2",{style:{marginBottom:"0.5rem"},children:"Feature Card"}),e.jsx("p",{style:{marginBottom:"1rem",color:"#666"},children:"Image, title, description, and action buttons composed together."}),e.jsxs("div",{style:{display:"flex",gap:"0.5rem"},children:[e.jsx(t,{variant:"primary",size:"small",children:"Learn More"}),e.jsx(t,{variant:"outline",size:"small",children:"Share"})]})]})}},l={render:()=>e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:"1rem",maxWidth:"800px"},children:[e.jsxs(a,{variant:"elevated",hoverable:!0,children:[e.jsx("h4",{children:"Elevated"}),e.jsx("p",{children:"With shadow"})]}),e.jsxs(a,{variant:"outlined",hoverable:!0,children:[e.jsx("h4",{children:"Outlined"}),e.jsx("p",{children:"With border"})]}),e.jsxs(a,{variant:"glass",hoverable:!0,children:[e.jsx("h4",{children:"Glass"}),e.jsx("p",{children:"Glassmorphism"})]})]}),parameters:{controls:{disable:!0},layout:"padded"}},s={args:{title:"Expandable Card",subtitle:"Click the arrow to expand",expandable:!0,variant:"outlined",children:e.jsxs("div",{children:[e.jsx("p",{children:"This content is collapsible. Useful for FAQ sections, settings panels, or progressive disclosure."}),e.jsxs("div",{style:{display:"flex",gap:"0.5rem",marginTop:"1rem"},children:[e.jsx(t,{variant:"primary",size:"small",children:"Action"}),e.jsx(t,{variant:"outline",size:"small",children:"Secondary"})]})]})}},i={render:()=>{const[d,p]=T.useState(!1);return e.jsxs("div",{style:{width:"400px"},children:[e.jsxs(a,{title:"Controlled Expandable",subtitle:"State managed externally",expandable:!0,expanded:d,onExpandChange:p,variant:"glass",hoverable:!0,children:[e.jsx("p",{children:"Expanded state is controlled via props."}),e.jsxs("p",{children:["Current: ",e.jsx("strong",{children:d?"Expanded":"Collapsed"})]})]}),e.jsx("div",{style:{marginTop:"1rem",textAlign:"center"},children:e.jsx(t,{variant:"primary",onClick:()=>p(!d),children:"External Toggle"})})]})},parameters:{controls:{disable:!0}}},o={render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",maxWidth:"600px"},children:[e.jsx(a,{title:"Getting Started",expandable:!0,variant:"outlined",children:e.jsx("p",{children:"Create an account and follow the onboarding tutorial to get started."})}),e.jsx(a,{title:"Account Management",expandable:!0,variant:"outlined",children:e.jsx("p",{children:"Manage settings from the profile page: personal info, password, notifications."})}),e.jsx(a,{title:"Billing & Payments",expandable:!0,defaultExpanded:!0,variant:"outlined",children:e.jsx("p",{children:"We accept all major credit cards and PayPal. Billing is monthly or annual."})})]}),parameters:{controls:{disable:!0},layout:"padded"}};var c,m,u;r.parameters={...r.parameters,docs:{...(c=r.parameters)==null?void 0:c.docs,source:{originalSource:`{
   args: {
     title: 'Card Title',
     subtitle: 'Optional subtitle',

package/storybook-static/assets/{CardNav.stories-e50-9J_A.js → CardNav.stories-1WFeombk.js}

@@ -1,4 +1,4 @@
-import{r as o,j as r}from"./iframe-CvT6MryR.js";import{g as u}from"./index-C8pce-KX.js";import{G as M}from"./iconBase-CstVDnta.js";import"./preload-helper-C1FmrZbK.js";function U(f){return M({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M18.25 15.5a.75.75 0 0 1-.75-.75V7.56L7.28 17.78a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L16.44 6.5H9.25a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-.75.75Z"},child:[]}]})(f)}const G="_open_87iwp_63",O="_logo_87iwp_71",n={"card-nav-container":"_card-nav-container_87iwp_1","card-nav":"_card-nav_87iwp_1","card-nav-top":"_card-nav-top_87iwp_25","hamburger-menu":"_hamburger-menu_87iwp_38","hamburger-line":"_hamburger-line_87iwp_48",open:G,"logo-container":"_logo-container_87iwp_71",logo:O,"card-nav-cta-button":"_card-nav-cta-button_87iwp_84","card-nav-content":"_card-nav-content_87iwp_101","nav-card":"_nav-card_87iwp_121","nav-card-label":"_nav-card-label_87iwp_134","nav-card-links":"_nav-card-links_87iwp_140","nav-card-link":"_nav-card-link_87iwp_140"},L=({logo:f,logoAlt:$="Logo",items:m,className:N="",ease:b="power3.out",baseColor:k="#fff",menuColor:R,buttonBgColor:j,buttonTextColor:E})=>{const[A,g]=o.useState(!1),[s,_]=o.useState(!1),c=o.useRef(null),p=o.useRef([]),l=o.useRef(null),C=()=>{const e=c.current;if(!e)return 260;if(window.matchMedia("(max-width: 768px)").matches){const a=e.querySelector(".card-nav-content");if(a){const i=a.style.visibility,v=a.style.pointerEvents,S=a.style.position,T=a.style.height;a.style.visibility="visible",a.style.pointerEvents="auto",a.style.position="static",a.style.height="auto",a.offsetHeight;const V=60,q=16,I=a.scrollHeight;return a.style.visibility=i,a.style.pointerEvents=v,a.style.position=S,a.style.height=T,V+I+q}}return 260},h=()=>{const e=c.current;if(!e)return null;u.set(e,{height:60,overflow:"hidden"}),u.set(p.current,{y:50,opacity:0});const t=u.timeline({paused:!0});return t.to(e,{height:C,duration:.4,ease:b}),t.to(p.current,{y:0,opacity:1,duration:.4,ease:b,stagger:.08},"-=0.1"),t};o.useLayoutEffect(()=>{const e=h();return l.current=e,()=>{e==null||e.kill(),l.current=null}},[b,m]),o.useLayoutEffect(()=>{const e=()=>{if(l.current)if(s){const t=C();u.set(c.current,{height:t}),l.current.kill();const a=h();a&&(a.progress(1),l.current=a)}else{l.current.kill();const t=h();t&&(l.current=t)}};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[s]);const D=()=>{const e=l.current;e&&(s?(g(!1),e.eventCallback("onReverseComplete",()=>_(!1)),e.reverse()):(g(!0),_(!0),e.play(0)))},H=e=>t=>{t&&(p.current[e]=t)};return r.jsx("div",{className:`${n["card-nav-container"]} ${N}`,children:r.jsxs("nav",{ref:c,className:`${n["card-nav"]} ${s?n.open:""}`,style:{backgroundColor:k},children:[r.jsxs("div",{className:`${n["card-nav-top"]}`,children:[r.jsxs("div",{className:`${n["hamburger-menu"]} ${A?n.open:""}`,onClick:D,role:"button","aria-label":s?"Close menu":"Open menu",tabIndex:0,style:{color:R||"#000"},children:[r.jsx("div",{className:`${n["hamburger-line"]}`}),r.jsx("div",{className:`${n["hamburger-line"]}`})]}),r.jsx("div",{className:`${n["logo-container"]}`,children:r.jsx("img",{src:f,alt:$,className:`${n.logo}`})}),r.jsx("button",{type:"button",className:`${n["card-nav-cta-button"]}`,style:{backgroundColor:j,color:E},children:"Get Started"})]}),r.jsx("div",{className:`${n["card-nav-content"]}`,"aria-hidden":!s,children:(m||[]).slice(0,3).map((e,t)=>{var a;return r.jsxs("div",{className:`${n["nav-card"]}`,ref:H(t),style:{backgroundColor:e.bgColor,color:e.textColor},children:[r.jsx("div",{className:`${n["nav-card-label"]}`,children:e.label}),r.jsx("div",{className:`${n["nav-card-links"]}`,children:(a=e.links)==null?void 0:a.map((i,v)=>r.jsxs("a",{className:`${n["nav-card-link"]}`,href:i.href,"aria-label":i.ariaLabel,children:[r.jsx(U,{className:"nav-card-link-icon","aria-hidden":"true"}),i.label]},`${i.label}-${v}`))})]},`${e.label}-${t}`)})})]})})};L.__docgenInfo={description:"",methods:[],displayName:"CardNav",props:{logoAlt:{defaultValue:{value:"'Logo'",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},ease:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},baseColor:{defaultValue:{value:"'#fff'",computed:!1},required:!1}}};const Z={title:"ReactBits/Components/CardNav",component:L,parameters:{layout:"fullscreen"},tags:["autodocs"]},d={args:{logoAlt:"Logo",items:[{label:"Products",bgColor:"#1a1a2e",textColor:"#fff",links:[{label:"Analytics",href:"#",ariaLabel:"Analytics"},{label:"Dashboard",href:"#",ariaLabel:"Dashboard"},{label:"Reports",href:"#",ariaLabel:"Reports"}]},{label:"Resources",bgColor:"#16213e",textColor:"#fff",links:[{label:"Documentation",href:"#",ariaLabel:"Documentation"},{label:"Tutorials",href:"#",ariaLabel:"Tutorials"}]},{label:"Company",bgColor:"#0f3460",textColor:"#fff",links:[{label:"About Us",href:"#",ariaLabel:"About Us"},{label:"Careers",href:"#",ariaLabel:"Careers"},{label:"Contact",href:"#",ariaLabel:"Contact"}]}],ease:"power3.out",baseColor:"#fff"}};var y,w,x;d.parameters={...d.parameters,docs:{...(y=d.parameters)==null?void 0:y.docs,source:{originalSource:`{
+import{r as o,j as r}from"./iframe-LZvJb0BS.js";import{g as u}from"./index-C8pce-KX.js";import{G as M}from"./iconBase-D_x0Veg_.js";import"./preload-helper-C1FmrZbK.js";function U(f){return M({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M18.25 15.5a.75.75 0 0 1-.75-.75V7.56L7.28 17.78a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L16.44 6.5H9.25a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-.75.75Z"},child:[]}]})(f)}const G="_open_87iwp_63",O="_logo_87iwp_71",n={"card-nav-container":"_card-nav-container_87iwp_1","card-nav":"_card-nav_87iwp_1","card-nav-top":"_card-nav-top_87iwp_25","hamburger-menu":"_hamburger-menu_87iwp_38","hamburger-line":"_hamburger-line_87iwp_48",open:G,"logo-container":"_logo-container_87iwp_71",logo:O,"card-nav-cta-button":"_card-nav-cta-button_87iwp_84","card-nav-content":"_card-nav-content_87iwp_101","nav-card":"_nav-card_87iwp_121","nav-card-label":"_nav-card-label_87iwp_134","nav-card-links":"_nav-card-links_87iwp_140","nav-card-link":"_nav-card-link_87iwp_140"},L=({logo:f,logoAlt:$="Logo",items:m,className:N="",ease:b="power3.out",baseColor:k="#fff",menuColor:R,buttonBgColor:j,buttonTextColor:E})=>{const[A,g]=o.useState(!1),[s,_]=o.useState(!1),c=o.useRef(null),p=o.useRef([]),l=o.useRef(null),C=()=>{const e=c.current;if(!e)return 260;if(window.matchMedia("(max-width: 768px)").matches){const a=e.querySelector(".card-nav-content");if(a){const i=a.style.visibility,v=a.style.pointerEvents,S=a.style.position,T=a.style.height;a.style.visibility="visible",a.style.pointerEvents="auto",a.style.position="static",a.style.height="auto",a.offsetHeight;const V=60,q=16,I=a.scrollHeight;return a.style.visibility=i,a.style.pointerEvents=v,a.style.position=S,a.style.height=T,V+I+q}}return 260},h=()=>{const e=c.current;if(!e)return null;u.set(e,{height:60,overflow:"hidden"}),u.set(p.current,{y:50,opacity:0});const t=u.timeline({paused:!0});return t.to(e,{height:C,duration:.4,ease:b}),t.to(p.current,{y:0,opacity:1,duration:.4,ease:b,stagger:.08},"-=0.1"),t};o.useLayoutEffect(()=>{const e=h();return l.current=e,()=>{e==null||e.kill(),l.current=null}},[b,m]),o.useLayoutEffect(()=>{const e=()=>{if(l.current)if(s){const t=C();u.set(c.current,{height:t}),l.current.kill();const a=h();a&&(a.progress(1),l.current=a)}else{l.current.kill();const t=h();t&&(l.current=t)}};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[s]);const D=()=>{const e=l.current;e&&(s?(g(!1),e.eventCallback("onReverseComplete",()=>_(!1)),e.reverse()):(g(!0),_(!0),e.play(0)))},H=e=>t=>{t&&(p.current[e]=t)};return r.jsx("div",{className:`${n["card-nav-container"]} ${N}`,children:r.jsxs("nav",{ref:c,className:`${n["card-nav"]} ${s?n.open:""}`,style:{backgroundColor:k},children:[r.jsxs("div",{className:`${n["card-nav-top"]}`,children:[r.jsxs("div",{className:`${n["hamburger-menu"]} ${A?n.open:""}`,onClick:D,role:"button","aria-label":s?"Close menu":"Open menu",tabIndex:0,style:{color:R||"#000"},children:[r.jsx("div",{className:`${n["hamburger-line"]}`}),r.jsx("div",{className:`${n["hamburger-line"]}`})]}),r.jsx("div",{className:`${n["logo-container"]}`,children:r.jsx("img",{src:f,alt:$,className:`${n.logo}`})}),r.jsx("button",{type:"button",className:`${n["card-nav-cta-button"]}`,style:{backgroundColor:j,color:E},children:"Get Started"})]}),r.jsx("div",{className:`${n["card-nav-content"]}`,"aria-hidden":!s,children:(m||[]).slice(0,3).map((e,t)=>{var a;return r.jsxs("div",{className:`${n["nav-card"]}`,ref:H(t),style:{backgroundColor:e.bgColor,color:e.textColor},children:[r.jsx("div",{className:`${n["nav-card-label"]}`,children:e.label}),r.jsx("div",{className:`${n["nav-card-links"]}`,children:(a=e.links)==null?void 0:a.map((i,v)=>r.jsxs("a",{className:`${n["nav-card-link"]}`,href:i.href,"aria-label":i.ariaLabel,children:[r.jsx(U,{className:"nav-card-link-icon","aria-hidden":"true"}),i.label]},`${i.label}-${v}`))})]},`${e.label}-${t}`)})})]})})};L.__docgenInfo={description:"",methods:[],displayName:"CardNav",props:{logoAlt:{defaultValue:{value:"'Logo'",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},ease:{defaultValue:{value:"'power3.out'",computed:!1},required:!1},baseColor:{defaultValue:{value:"'#fff'",computed:!1},required:!1}}};const Z={title:"ReactBits/Components/CardNav",component:L,parameters:{layout:"fullscreen"},tags:["autodocs"]},d={args:{logoAlt:"Logo",items:[{label:"Products",bgColor:"#1a1a2e",textColor:"#fff",links:[{label:"Analytics",href:"#",ariaLabel:"Analytics"},{label:"Dashboard",href:"#",ariaLabel:"Dashboard"},{label:"Reports",href:"#",ariaLabel:"Reports"}]},{label:"Resources",bgColor:"#16213e",textColor:"#fff",links:[{label:"Documentation",href:"#",ariaLabel:"Documentation"},{label:"Tutorials",href:"#",ariaLabel:"Tutorials"}]},{label:"Company",bgColor:"#0f3460",textColor:"#fff",links:[{label:"About Us",href:"#",ariaLabel:"About Us"},{label:"Careers",href:"#",ariaLabel:"Careers"},{label:"Contact",href:"#",ariaLabel:"Contact"}]}],ease:"power3.out",baseColor:"#fff"}};var y,w,x;d.parameters={...d.parameters,docs:{...(y=d.parameters)==null?void 0:y.docs,source:{originalSource:`{
   args: {
     logoAlt: 'Logo',
     items: [{