@stfrigerio/sito-template 0.1.56 → 0.1.57

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

@@ -1,470 +0,0 @@
-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/OrbitImages.stories-Bzf1HUks.js

@@ -1,26 +0,0 @@
-import{r as G,j as O}from"./iframe-LZvJb0BS.js";import{u as me}from"./use-motion-value-Cic9xvrL.js";import{Y as he,H as de,K as ge,Q as oe,q as le,Z as $e,_ as ve,$ as be,s as Ve,N as ye,o as Ae,a0 as Se}from"./MotionConfigContext-D_4LMwJ5.js";import{V as Me,c as je,a as Ee,b as _e,d as qe,S as Oe,H as Pe,v as Z,e as Ie,f as we,m as De}from"./proxy-94dt0K2Y.js";import{u as Te}from"./use-transform-D1fwdMmS.js";import"./preload-helper-C1FmrZbK.js";const Ce=(t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t};function ue(t,e){return he(t)?t[Ce(0,t.length,e)]:t}class Le{constructor(e){this.stop=()=>this.runAll("stop"),this.animations=e.filter(Boolean)}get finished(){return Promise.all(this.animations.map(e=>e.finished))}getAll(e){return this.animations[0][e]}setAll(e,n){for(let a=0;a<this.animations.length;a++)this.animations[a][e]=n}attachTimeline(e){const n=this.animations.map(a=>a.attachTimeline(e));return()=>{n.forEach((a,s)=>{a&&a(),this.animations[s].stop()})}}get time(){return this.getAll("time")}set time(e){this.setAll("time",e)}get speed(){return this.getAll("speed")}set speed(e){this.setAll("speed",e)}get state(){return this.getAll("state")}get startTime(){return this.getAll("startTime")}get duration(){return x(this.animations,"duration")}get iterationDuration(){return x(this.animations,"iterationDuration")}runAll(e){this.animations.forEach(n=>n[e]())}play(){this.runAll("play")}pause(){this.runAll("pause")}cancel(){this.runAll("cancel")}complete(){this.runAll("complete")}}function x(t,e){let n=0;for(let a=0;a<t.length;a++){const s=t[a][e];s!==null&&s>n&&(n=s)}return n}class Ne extends Le{then(e,n){return this.finished.finally(e).then(()=>{})}}function Re(t,e){return t in e}class Ge extends Me{constructor(){super(...arguments),this.type="object"}readValueFromInstance(e,n){if(Re(n,e)){const a=e[n];if(typeof a=="string"||typeof a=="number")return a}}getBaseTargetFromProps(){}removeValueFromRenderState(e,n){delete n.output[e]}measureInstanceViewportBox(){return je()}build(e,n){Object.assign(e.output,n)}renderInstance(e,{output:n}){Object.assign(e,n)}sortInstanceNodePosition(){return 0}}function Q(t){return typeof t=="object"&&!Array.isArray(t)}function fe(t,e,n,a){return t==null?[]:typeof t=="string"&&Q(e)?de(t,n,a):t instanceof NodeList?Array.from(t):Array.isArray(t)?t.filter(s=>s!=null):[t]}function Ke(t,e,n){return t*(e+1)}function ee(t,e,n,a){return typeof e=="number"?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):e==="<"?n:e.startsWith("<")?Math.max(0,n+parseFloat(e.slice(1))):a.get(e)??t}function Be(t,e,n){for(let a=0;a<t.length;a++){const s=t[a];s.at>e&&s.at<n&&(oe(t,s),a--)}}function Fe(t,e,n,a,s,i){Be(t,s,i);for(let r=0;r<e.length;r++)t.push({value:e[r],at:ge(s,i,a[r]),easing:ue(n,r)})}function We(t,e){for(let n=0;n<t.length;n++)t[n]=t[n]/(e+1)}function Ze(t,e){return t.at===e.at?t.value===null?1:e.value===null?-1:0:t.at-e.at}const He="easeInOut";function ze(t,{defaultTransition:e={},...n}={},a,s){const i=e.duration||.3,r=new Map,l=new Map,o={},f=new Map;let c=0,u=0,C=0;for(let P=0;P<t.length;P++){const b=t[P];if(typeof b=="string"){f.set(b,u);continue}else if(!Array.isArray(b)){f.set(b.name,ee(u,b.at,c,f));continue}let[V,$,g={}]=b;g.at!==void 0&&(u=ee(u,g.at,c,f));let v=0;const w=(S,I,M,E=0,d=0)=>{const p=ke(S),{delay:D=0,times:j=$e(p),type:h=e.type||"keyframes",repeat:m,repeatType:H,repeatDelay:K=0,...z}=I;let{ease:_=e.ease||"easeOut",duration:y}=I;const A=typeof D=="function"?D(E,d):D,q=p.length,J=Ee(h)?h:s==null?void 0:s[h||"keyframes"];if(q<=2&&J){let L=100;if(q===2&&Ue(p)){const N=p[1]-p[0];L=Math.abs(N)}const B={...e,...z};y!==void 0&&(B.duration=Ve(y));const F=ve(B,L,J);_=F.ease,y=F.duration}y??(y=i);const U=u+A;j.length===1&&j[0]===0&&(j[1]=1);const Y=j.length-p.length;if(Y>0&&be(j,Y),p.length===1&&p.unshift(null),m){y=Ke(y,m);const L=[...p],B=[...j];_=Array.isArray(_)?[..._]:[_];const F=[..._];for(let N=0;N<m;N++){p.push(...L);for(let R=0;R<L.length;R++)j.push(B[R]+(N+1)),_.push(R===0?"linear":ue(F,R-1))}We(j,m)}const X=U+y;Fe(M,p,_,j,U,X),v=Math.max(A+y,v),C=Math.max(X,C)};if(le(V)){const S=te(V,l);w($,g,ne("default",S))}else{const S=fe(V,$,a,o),I=S.length;for(let M=0;M<I;M++){$=$,g=g;const E=S[M],d=te(E,l);for(const p in $)w($[p],Qe(g,p),ne(p,d),M,I)}}c=u,u+=v}return l.forEach((P,b)=>{for(const V in P){const $=P[V];$.sort(Ze);const g=[],v=[],w=[];for(let E=0;E<$.length;E++){const{at:d,value:p,easing:D}=$[E];g.push(p),v.push(ye(0,C,d)),w.push(D||"easeOut")}v[0]!==0&&(v.unshift(0),g.unshift(g[0]),w.unshift(He)),v[v.length-1]!==1&&(v.push(1),g.push(null)),r.has(b)||r.set(b,{keyframes:{},transition:{}});const S=r.get(b);S.keyframes[V]=g;const{type:I,...M}=e;S.transition[V]={...M,duration:C,ease:w,times:v,...n}}}),r}function te(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ne(t,e){return e[t]||(e[t]=[]),e[t]}function ke(t){return Array.isArray(t)?t:[t]}function Qe(t,e){return t&&t[e]?{...t,...t[e]}:{...t}}const Je=t=>typeof t=="number",Ue=t=>t.every(Je);function Ye(t){const e={presenceContext:null,props:{},visualState:{renderState:{transform:{},transformOrigin:{},style:{},vars:{},attrs:{}},latestValues:{}}},n=_e(t)&&!qe(t)?new Oe(e):new Pe(e);n.mount(t),Z.set(t,n)}function Xe(t){const e={presenceContext:null,props:{},visualState:{renderState:{output:{}},latestValues:{}}},n=new Ge(e);n.mount(t),Z.set(t,n)}function xe(t,e){return le(t)||typeof t=="number"||typeof t=="string"&&!Q(e)}function ce(t,e,n,a){const s=[];if(xe(t,e))s.push(Ie(t,Q(e)&&e.default||e,n&&(n.default||n)));else{if(t==null)return s;const i=fe(t,e,a),r=i.length;for(let l=0;l<r;l++){const o=i[l],f=o instanceof Element?Ye:Xe;Z.has(o)||f(o);const c=Z.get(o),u={...n};"delay"in u&&typeof u.delay=="function"&&(u.delay=u.delay(l,r)),s.push(...we(c,{...e,transition:u},{}))}}return s}function et(t,e,n){const a=[],s=t.map(r=>{if(Array.isArray(r)&&typeof r[0]=="function"){const l=r[0],o=Ae(0);return o.on("change",l),r.length===1?[o,[0,1]]:r.length===2?[o,[0,1],r[1]]:[o,r[1],r[2]]}return r});return ze(s,e,n,{spring:Se}).forEach(({keyframes:r,transition:l},o)=>{a.push(...ce(o,r,l))}),a}function tt(t){return Array.isArray(t)&&t.some(Array.isArray)}function nt(t={}){const{scope:e,reduceMotion:n}=t;function a(s,i,r){let l=[],o;if(tt(s)){const{onComplete:c,...u}=i||{};typeof c=="function"&&(o=c),l=et(s,n!==void 0?{reduceMotion:n,...u}:u,e)}else{const{onComplete:c,...u}=r||{};typeof c=="function"&&(o=c),l=ce(s,i,n!==void 0?{reduceMotion:n,...u}:u,e)}const f=new Ne(l);return o&&f.finished.then(o),e&&(e.animations.push(f),f.finished.then(()=>{oe(e.animations,f)})),f}return a}const at=nt(),T={"orbit-container":"_orbit-container_tujj3_1","orbit-scaling-container":"_orbit-scaling-container_tujj3_7","orbit-rotation-wrapper":"_orbit-rotation-wrapper_tujj3_20","orbit-path-svg":"_orbit-path-svg_tujj3_27","orbit-item":"_orbit-item_tujj3_33","orbit-center-content":"_orbit-center-content_tujj3_39","orbit-image":"_orbit-image_tujj3_48"};function k(t,e,n,a){return`M ${t-n} ${e} A ${n} ${a} 0 1 0 ${t+n} ${e} A ${n} ${a} 0 1 0 ${t-n} ${e}`}function ae(t,e,n){return k(t,e,n,n)}function st(t,e,n){const a=n/2;return`M ${t-a} ${e-a} L ${t+a} ${e-a} L ${t+a} ${e+a} L ${t-a} ${e+a} Z`}function rt(t,e,n,a){const s=n/2,i=a/2;return`M ${t-s} ${e-i} L ${t+s} ${e-i} L ${t+s} ${e+i} L ${t-s} ${e+i} Z`}function it(t,e,n){const a=n*Math.sqrt(3)/2,s=n/2;return`M ${t} ${e-a/1.5} L ${t+s} ${e+a/3} L ${t-s} ${e+a/3} Z`}function ot(t,e,n,a,s){const i=Math.PI/s;let r="";for(let l=0;l<2*s;l++){const o=l%2===0?n:a,f=l*i-Math.PI/2,c=t+o*Math.cos(f),u=e+o*Math.sin(f);r+=l===0?`M ${c} ${u}`:` L ${c} ${u}`}return r+" Z"}function lt(t,e,n){const a=n/30;return`M ${t} ${e+12*a} C ${t-20*a} ${e-5*a}, ${t-12*a} ${e-18*a}, ${t} ${e-8*a} C ${t+12*a} ${e-18*a}, ${t+20*a} ${e-5*a}, ${t} ${e+12*a}`}function ut(t,e,n,a){const s=n/2,i=a/2;return`M ${t} ${e} C ${t+s*.5} ${e-i}, ${t+s} ${e-i}, ${t+s} ${e} C ${t+s} ${e+i}, ${t+s*.5} ${e+i}, ${t} ${e} C ${t-s*.5} ${e+i}, ${t-s} ${e+i}, ${t-s} ${e} C ${t-s} ${e-i}, ${t-s*.5} ${e-i}, ${t} ${e}`}function ft(t,e,n,a,s){const i=[],r=s*20,l=n/2;for(let o=0;o<=r;o++){const f=t-l+n*o/r,c=e+Math.sin(o/r*s*2*Math.PI)*a;i.push(o===0?`M ${f} ${c}`:`L ${f} ${c}`)}for(let o=r;o>=0;o--){const f=t-l+n*o/r,c=e-Math.sin(o/r*s*2*Math.PI)*a;i.push(`L ${f} ${c}`)}return i.join(" ")+" Z"}function ct({item:t,index:e,totalItems:n,path:a,itemSize:s,rotation:i,progress:r,fill:l}){const o=l?e/n*100:0,f=Te(r,c=>`${((c+o)%100+100)%100}%`);return O.jsx(De.div,{className:`${T["orbit-item"]}`,style:{width:s,height:s,offsetPath:`path("${a}")`,offsetRotate:"0deg",offsetAnchor:"center center",offsetDistance:f},children:O.jsx("div",{style:{transform:`rotate(${-i}deg)`},children:t})})}function pe({images:t=[],altPrefix:e="Orbiting image",shape:n="ellipse",customPath:a,baseWidth:s=1400,radiusX:i=700,radiusY:r=170,radius:l=300,starPoints:o=5,starInnerRatio:f=.5,rotation:c=-8,duration:u=40,itemSize:C=64,direction:P="normal",fill:b=!0,width:V=100,height:$=100,className:g="",showPath:v=!1,pathColor:w="rgba(0,0,0,0.1)",pathWidth:S=2,easing:I="linear",paused:M=!1,centerContent:E,responsive:d=!1}){const p=G.useRef(null),[D,j]=G.useState(1),h=s/2,m=s/2,H=G.useMemo(()=>{switch(n){case"circle":return ae(h,m,l);case"ellipse":return k(h,m,i,r);case"square":return st(h,m,l*2);case"rectangle":return rt(h,m,i*2,r*2);case"triangle":return it(h,m,l*2);case"star":return ot(h,m,l,l*f,o);case"heart":return lt(h,m,l*2);case"infinity":return ut(h,m,i*2,r*2);case"wave":return ft(h,m,i*2,r,3);case"custom":return a||ae(h,m,l);default:return k(h,m,i,r)}},[n,a,h,m,i,r,l,o,f]);G.useEffect(()=>{if(!d||!p.current)return;const A=()=>{p.current&&j(p.current.clientWidth/s)};A();const q=new ResizeObserver(A);return q.observe(p.current),()=>q.disconnect()},[d,s]);const K=me(0);G.useEffect(()=>{if(M)return;const A=at(K,P==="reverse"?-100:100,{duration:u,ease:I,repeat:1/0,repeatType:"loop"});return()=>A.stop()},[K,u,I,P,M]);const z=d?"100%":typeof V=="number"?V:"100%",_=d?"auto":typeof $=="number"?$:typeof V=="number"?V:"auto",y=t.map((A,q)=>O.jsx("img",{src:A,alt:`${e} ${q+1}`,draggable:!1,className:`${T["orbit-image"]}`},A));return O.jsxs("div",{ref:p,className:`${T["orbit-container"]} ${g}`,style:{width:z,height:_,aspectRatio:d?"1 / 1":void 0},"aria-hidden":"true",children:[O.jsx("div",{className:d?"orbit-scaling-container orbit-scaling-container--responsive":T["orbit-scaling-container"],style:{width:d?s:"100%",height:d?s:"100%",transform:d?`translate(-50%, -50%) scale(${D})`:void 0},children:O.jsxs("div",{className:`${T["orbit-rotation-wrapper"]}`,style:{transform:`rotate(${c}deg)`},children:[v&&O.jsx("svg",{width:"100%",height:"100%",viewBox:`0 0 ${s} ${s}`,className:`${T["orbit-path-svg"]}`,children:O.jsx("path",{d:H,fill:"none",stroke:w,strokeWidth:S/D})}),y.map((A,q)=>O.jsx(ct,{item:A,index:q,totalItems:y.length,path:H,itemSize:C,rotation:c,progress:K,fill:b},q))]})}),E&&O.jsx("div",{className:`${T["orbit-center-content"]}`,children:E})]})}pe.__docgenInfo={description:"",methods:[],displayName:"OrbitImages",props:{images:{defaultValue:{value:"[]",computed:!1},required:!1},altPrefix:{defaultValue:{value:"'Orbiting image'",computed:!1},required:!1},shape:{defaultValue:{value:"'ellipse'",computed:!1},required:!1},baseWidth:{defaultValue:{value:"1400",computed:!1},required:!1},radiusX:{defaultValue:{value:"700",computed:!1},required:!1},radiusY:{defaultValue:{value:"170",computed:!1},required:!1},radius:{defaultValue:{value:"300",computed:!1},required:!1},starPoints:{defaultValue:{value:"5",computed:!1},required:!1},starInnerRatio:{defaultValue:{value:"0.5",computed:!1},required:!1},rotation:{defaultValue:{value:"-8",computed:!1},required:!1},duration:{defaultValue:{value:"40",computed:!1},required:!1},itemSize:{defaultValue:{value:"64",computed:!1},required:!1},direction:{defaultValue:{value:"'normal'",computed:!1},required:!1},fill:{defaultValue:{value:"true",computed:!1},required:!1},width:{defaultValue:{value:"100",computed:!1},required:!1},height:{defaultValue:{value:"100",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},showPath:{defaultValue:{value:"false",computed:!1},required:!1},pathColor:{defaultValue:{value:"'rgba(0,0,0,0.1)'",computed:!1},required:!1},pathWidth:{defaultValue:{value:"2",computed:!1},required:!1},easing:{defaultValue:{value:"'linear'",computed:!1},required:!1},paused:{defaultValue:{value:"false",computed:!1},required:!1},responsive:{defaultValue:{value:"false",computed:!1},required:!1}}};const vt={title:"ReactBits/Animations/OrbitImages",component:pe,parameters:{layout:"fullscreen"},tags:["autodocs"]},W={args:{images:["https://picsum.photos/seed/a/200/200","https://picsum.photos/seed/b/200/200","https://picsum.photos/seed/c/200/200","https://picsum.photos/seed/d/200/200","https://picsum.photos/seed/e/200/200","https://picsum.photos/seed/f/200/200"],altPrefix:"Orbiting image",shape:"ellipse",baseWidth:1400,radiusX:700,radiusY:170,radius:300,starPoints:5,starInnerRatio:.5,rotation:-8,duration:40,itemSize:64,direction:"normal",fill:!0,width:100,height:100,showPath:!1,pathColor:"rgba(0,0,0,0.1)",pathWidth:2,easing:"linear",paused:!1,responsive:!1}};var se,re,ie;W.parameters={...W.parameters,docs:{...(se=W.parameters)==null?void 0:se.docs,source:{originalSource:`{
-  args: {
-    images: ['https://picsum.photos/seed/a/200/200', 'https://picsum.photos/seed/b/200/200', 'https://picsum.photos/seed/c/200/200', 'https://picsum.photos/seed/d/200/200', 'https://picsum.photos/seed/e/200/200', 'https://picsum.photos/seed/f/200/200'],
-    altPrefix: 'Orbiting image',
-    shape: 'ellipse',
-    baseWidth: 1400,
-    radiusX: 700,
-    radiusY: 170,
-    radius: 300,
-    starPoints: 5,
-    starInnerRatio: 0.5,
-    rotation: -8,
-    duration: 40,
-    itemSize: 64,
-    direction: 'normal',
-    fill: true,
-    width: 100,
-    height: 100,
-    showPath: false,
-    pathColor: 'rgba(0,0,0,0.1)',
-    pathWidth: 2,
-    easing: 'linear',
-    paused: false,
-    responsive: false
-  }
-}`,...(ie=(re=W.parameters)==null?void 0:re.docs)==null?void 0:ie.source}}};const bt=["Default"];export{W as Default,bt as __namedExportsOrder,vt as default};

package/storybook-static/assets/ScrollVelocity.stories-De4s_pOX.js

@@ -1,9 +0,0 @@
-import{r as p,j as v}from"./iframe-LZvJb0BS.js";import{u as re}from"./use-motion-value-Cic9xvrL.js";import{h as ne,j as le,i as Te,r as Ce,m as Oe}from"./proxy-94dt0K2Y.js";import{f as h,I as k,N as Ne,a3 as Pe,a1 as He,Z as Be,j as Ae,c as oe,R as ke,U as Re,o as W,u as be,a as q}from"./MotionConfigContext-D_4LMwJ5.js";import{u as ze}from"./use-spring-D4LsSJyy.js";import{u as D}from"./use-transform-D1fwdMmS.js";import{u as je}from"./use-animation-frame-04H3dRpD.js";import"./preload-helper-C1FmrZbK.js";function ce(e,t){let s;const r=()=>{const{currentTime:n}=t,o=(n===null?0:n.value)/100;s!==o&&e(o),s=o};return h.preUpdate(r,!0),()=>k(r)}function Ie(e,t,s){p.useInsertionEffect(()=>e.on(t,s),[e,t,s])}function O(e){return typeof window>"u"?!1:e?ne():le()}const _e=50,F=()=>({current:0,offset:[],progress:0,scrollLength:0,targetOffset:0,targetLength:0,containerLength:0,velocity:0}),qe=()=>({time:0,x:F(),y:F()}),De={x:{length:"Width",position:"Left"},y:{length:"Height",position:"Top"}};function $(e,t,s,r){const n=s[t],{length:l,position:o}=De[t],c=n.current,a=s.time;n.current=Math.abs(e[`scroll${o}`]),n.scrollLength=e[`scroll${l}`]-e[`client${l}`],n.offset.length=0,n.offset[0]=0,n.offset[1]=n.scrollLength,n.progress=Ne(0,n.scrollLength,n.current);const i=r-a;n.velocity=i>_e?0:Pe(n.current-c,i)}function Fe(e,t,s){$(e,"x",t,s),$(e,"y",t,s),t.time=s}function $e(e,t){const s={x:0,y:0};let r=e;for(;r&&r!==t;)if(Te(r))s.x+=r.offsetLeft,s.y+=r.offsetTop,r=r.offsetParent;else if(r.tagName==="svg"){const n=r.getBoundingClientRect();r=r.parentElement;const l=r.getBoundingClientRect();s.x+=n.left-l.left,s.y+=n.top-l.top}else if(r instanceof SVGGraphicsElement){const{x:n,y:l}=r.getBBox();s.x+=n,s.y+=l;let o=null,c=r.parentNode;for(;!o;)c.tagName==="svg"&&(o=c),c=r.parentNode;r=o}else break;return s}const R={start:0,center:.5,end:1};function X(e,t,s=0){let r=0;if(e in R&&(e=R[e]),typeof e=="string"){const n=parseFloat(e);e.endsWith("px")?r=n:e.endsWith("%")?e=n/100:e.endsWith("vw")?r=n/100*document.documentElement.clientWidth:e.endsWith("vh")?r=n/100*document.documentElement.clientHeight:e=n}return typeof e=="number"&&(r=t*e),s+r}const Xe=[0,0];function Ye(e,t,s,r){let n=Array.isArray(e)?e:Xe,l=0,o=0;return typeof e=="number"?n=[e,e]:typeof e=="string"&&(e=e.trim(),e.includes(" ")?n=e.split(" "):n=[e,R[e]?e:"0"]),l=X(n[0],s,r),o=X(n[1],t),l-o}const E={Enter:[[0,1],[1,1]],Exit:[[0,0],[1,0]],Any:[[1,0],[0,1]],All:[[0,0],[1,1]]},Me={x:0,y:0};function Ue(e){return"getBBox"in e&&e.tagName!=="svg"?e.getBBox():{width:e.clientWidth,height:e.clientHeight}}function Ge(e,t,s){const{offset:r=E.All}=s,{target:n=e,axis:l="y"}=s,o=l==="y"?"height":"width",c=n!==e?$e(n,e):Me,a=n===e?{width:e.scrollWidth,height:e.scrollHeight}:Ue(n),i={width:e.clientWidth,height:e.clientHeight};t[l].offset.length=0;let u=!t[l].interpolate;const m=r.length;for(let f=0;f<m;f++){const g=Ye(r[f],i[o],a[o],c[l]);!u&&g!==t[l].interpolatorOffsets[f]&&(u=!0),t[l].offset[f]=g}u&&(t[l].interpolate=He(t[l].offset,Be(r),{clamp:!1}),t[l].interpolatorOffsets=[...t[l].offset]),t[l].progress=Ae(0,1,t[l].interpolate(t[l].current))}function Ke(e,t=e,s){if(s.x.targetOffset=0,s.y.targetOffset=0,t!==e){let r=t;for(;r&&r!==e;)s.x.targetOffset+=r.offsetLeft,s.y.targetOffset+=r.offsetTop,r=r.offsetParent}s.x.targetLength=t===e?t.scrollWidth:t.clientWidth,s.y.targetLength=t===e?t.scrollHeight:t.clientHeight,s.x.containerLength=e.clientWidth,s.y.containerLength=e.clientHeight}function Je(e,t,s,r={}){return{measure:n=>{Ke(e,r.target,s),Fe(e,s,n),(r.offset||r.target)&&Ge(e,s,r)},notify:()=>t(s)}}const x=new WeakMap,Y=new WeakMap,A=new WeakMap,M=new WeakMap,L=new WeakMap,U=e=>e===document.scrollingElement?window:e;function ie(e,{container:t=document.scrollingElement,trackContentSize:s=!1,...r}={}){if(!t)return oe;let n=A.get(t);n||(n=new Set,A.set(t,n));const l=qe(),o=Je(t,e,l,r);if(n.add(o),!x.has(t)){const a=()=>{for(const f of n)f.measure(ke.timestamp);h.preUpdate(i)},i=()=>{for(const f of n)f.notify()},u=()=>h.read(a);x.set(t,u);const m=U(t);window.addEventListener("resize",u),t!==document.documentElement&&Y.set(t,Ce(t,u)),m.addEventListener("scroll",u),u()}if(s&&!L.has(t)){const a=x.get(t),i={width:t.scrollWidth,height:t.scrollHeight};M.set(t,i);const u=()=>{const f=t.scrollWidth,g=t.scrollHeight;(i.width!==f||i.height!==g)&&(a(),i.width=f,i.height=g)},m=h.read(u,!0);L.set(t,m)}const c=x.get(t);return h.read(c,!1,!0),()=>{var m;k(c);const a=A.get(t);if(!a||(a.delete(o),a.size))return;const i=x.get(t);x.delete(t),i&&(U(t).removeEventListener("scroll",i),(m=Y.get(t))==null||m(),window.removeEventListener("resize",i));const u=L.get(t);u&&(k(u),L.delete(t)),M.delete(t)}}const Ze=[[E.Enter,"entry"],[E.Exit,"exit"],[E.Any,"cover"],[E.All,"contain"]],G={start:0,end:1};function Qe(e){const t=e.trim().split(/\s+/);if(t.length!==2)return;const s=G[t[0]],r=G[t[1]];if(!(s===void 0||r===void 0))return[s,r]}function et(e){if(e.length!==2)return;const t=[];for(const s of e)if(Array.isArray(s))t.push(s);else if(typeof s=="string"){const r=Qe(s);if(!r)return;t.push(r)}else return;return t}function tt(e,t){const s=et(e);if(!s)return!1;for(let r=0;r<2;r++){const n=s[r],l=t[r];if(n[0]!==l[0]||n[1]!==l[1])return!1}return!0}function b(e){if(!e)return{rangeStart:"contain 0%",rangeEnd:"contain 100%"};for(const[t,s]of Ze)if(tt(e,t))return{rangeStart:`${s} 0%`,rangeEnd:`${s} 100%`}}const K=new Map;function J(e){const t={value:0},s=ie(r=>{t.value=r[e.axis].progress*100},e);return{currentTime:t,cancel:s}}function ae({source:e,container:t,...s}){const{axis:r}=s;e&&(t=e);let n=K.get(t);n||(n=new Map,K.set(t,n));const l=s.target??"self";let o=n.get(l);o||(o={},n.set(l,o));const c=r+(s.offset??[]).join(",");return o[c]||(s.target&&O(s.target)?b(s.offset)?o[c]=new ViewTimeline({subject:s.target,axis:r}):o[c]=J({container:t,...s}):O()?o[c]=new ScrollTimeline({source:t,axis:r}):o[c]=J({container:t,...s})),o[c]}function st(e,t){const s=ae(t),r=t.target?b(t.offset):void 0,n=t.target?O(t.target)&&!!r:O();return e.attachTimeline({timeline:n?s:void 0,...r&&n&&{rangeStart:r.rangeStart,rangeEnd:r.rangeEnd},observe:l=>(l.pause(),ce(o=>{l.time=l.iterationDuration*o},s))})}function rt(e){return e.length===2}function nt(e,t){return rt(e)?ie(s=>{e(s[t.axis].progress,s)},t):ce(e,ae(t))}function ue(e,{axis:t="y",container:s=document.scrollingElement,...r}={}){if(!s)return oe;const n={axis:t,container:s,...r};return typeof e=="function"?nt(e,n):st(e,n)}const lt=()=>({scrollX:W(0),scrollY:W(0),scrollXProgress:W(0),scrollYProgress:W(0)}),T=e=>e?!e.current:!1;function Z(e,t,s,r){return{factory:n=>ue(n,{...t,axis:e,container:(s==null?void 0:s.current)||void 0,target:(r==null?void 0:r.current)||void 0}),times:[0,1],keyframes:[0,1],ease:n=>n,duration:1}}function ot(e,t){return typeof window>"u"?!1:e?ne()&&!!b(t):le()}function ct({container:e,target:t,...s}={}){const r=Re(lt);ot(t,s.offset)&&(r.scrollXProgress.accelerate=Z("x",s,e,t),r.scrollYProgress.accelerate=Z("y",s,e,t));const n=p.useRef(null),l=p.useRef(!1),o=p.useCallback(()=>(n.current=ue((c,{x:a,y:i})=>{r.scrollX.set(a.current),r.scrollXProgress.set(a.progress),r.scrollY.set(i.current),r.scrollYProgress.set(i.progress)},{...s,container:(e==null?void 0:e.current)||void 0,target:(t==null?void 0:t.current)||void 0}),()=>{var c;(c=n.current)==null||c.call(n)}),[e,t,JSON.stringify(s.offset)]);return be(()=>{if(l.current=!1,T(e)||T(t)){l.current=!0;return}else return o()},[o]),p.useEffect(()=>{if(l.current)return q(!T(e)),q(!T(t)),o()},[o]),r}function it(e){const t=re(e.getVelocity()),s=()=>{const r=e.getVelocity();t.set(r),r&&h.update(s)};return Ie(e,"change",()=>{h.update(s,!1,!0)}),t}const at="_parallax_1s8d6_1",ut="_scroller_1s8d6_6",Q={parallax:at,scroller:ut};function ft(e){const[t,s]=p.useState(0);return p.useLayoutEffect(()=>{function r(){e.current&&s(e.current.offsetWidth)}return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[e]),t}const fe=({scrollContainerRef:e,texts:t=[],velocity:s=100,className:r="",damping:n=50,stiffness:l=400,numCopies:o=6,velocityMapping:c={input:[0,1e3],output:[0,5]},parallaxClassName:a=Q.parallax,scrollerClassName:i=Q.scroller,parallaxStyle:u,scrollerStyle:m})=>{function f({children:g,baseVelocity:S=s,scrollContainerRef:z,className:de="",damping:me,stiffness:ge,numCopies:pe,velocityMapping:y,parallaxClassName:he,scrollerClassName:ye,parallaxStyle:xe,scrollerStyle:we}){const N=re(0),ve=z?{container:z}:{},{scrollY:Ee}=ct(ve),Se=it(Ee),Ve=ze(Se,{damping:me??50,stiffness:ge??400}),P=D(Ve,(y==null?void 0:y.input)||[0,1e3],(y==null?void 0:y.output)||[0,5],{clamp:!1}),j=p.useRef(null),I=ft(j);function We(d,H,w){const B=H-d;return((w-d)%B+B)%B+d}const Le=D(N,d=>I===0?"0px":`${We(-I,0,d)}px`),V=p.useRef(1);je((d,H)=>{let w=V.current*S*(H/1e3);P.get()<0?V.current=-1:P.get()>0&&(V.current=1),w+=V.current*w*P.get(),N.set(N.get()+w)});const _=[];for(let d=0;d<pe;d++)_.push(v.jsxs("span",{className:de,ref:d===0?j:null,children:[g," "]},d));return v.jsx("div",{className:he,style:xe,children:v.jsx(Oe.div,{className:ye,style:{x:Le,...we},children:_})})}return v.jsx("section",{children:t.map((g,S)=>v.jsx(f,{className:r,baseVelocity:S%2!==0?-s:s,scrollContainerRef:e,damping:n,stiffness:l,numCopies:o,velocityMapping:c,parallaxClassName:a,scrollerClassName:i,parallaxStyle:u,scrollerStyle:m,children:g},S))})};fe.__docgenInfo={description:"",methods:[],displayName:"ScrollVelocity",props:{texts:{defaultValue:{value:"[]",computed:!1},required:!1},velocity:{defaultValue:{value:"100",computed:!1},required:!1},className:{defaultValue:{value:"''",computed:!1},required:!1},damping:{defaultValue:{value:"50",computed:!1},required:!1},stiffness:{defaultValue:{value:"400",computed:!1},required:!1},numCopies:{defaultValue:{value:"6",computed:!1},required:!1},velocityMapping:{defaultValue:{value:"{ input: [0, 1000], output: [0, 5] }",computed:!1},required:!1},parallaxClassName:{defaultValue:{value:"styles['parallax']",computed:!0},required:!1},scrollerClassName:{defaultValue:{value:"styles['scroller']",computed:!0},required:!1}}};const Et={title:"ReactBits/TextAnimations/ScrollVelocity",component:fe,parameters:{layout:"fullscreen"},tags:["autodocs"]},C={args:{texts:["React Bits","Scroll Velocity"],velocity:100,damping:50,stiffness:400,numCopies:6}};var ee,te,se;C.parameters={...C.parameters,docs:{...(ee=C.parameters)==null?void 0:ee.docs,source:{originalSource:`{
-  args: {
-    texts: ['React Bits', 'Scroll Velocity'],
-    velocity: 100,
-    damping: 50,
-    stiffness: 400,
-    numCopies: 6
-  }
-}`,...(se=(te=C.parameters)==null?void 0:te.docs)==null?void 0:se.source}}};const St=["Default"];export{C as Default,St as __namedExportsOrder,Et as default};

package/storybook-static/assets/Tabs-CLXu7F99.css

@@ -1 +0,0 @@
-._tabs_bo1mf_1{display:flex;gap:0;padding:0;padding-bottom:var(--spacing-md);background:transparent;position:relative;width:100%}._tabs_bo1mf_1:before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--color-border-rgb),.1) 10%,rgba(var(--color-border-rgb),.1) 90%,transparent)}._tab_bo1mf_1{position:relative;padding:16px 24px;background:transparent;border:none;border-radius:0;cursor:pointer;font-size:15px;font-weight:600;font-family:var(--font-family);letter-spacing:-.02em;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:10px;color:var(--color-text-secondary);opacity:.7}._tab_bo1mf_1:before{content:"";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--color-primary);transform:translate(-50%);transition:width .4s cubic-bezier(.16,1,.3,1);border-radius:3px 3px 0 0}._tab_bo1mf_1:hover{color:var(--color-text);opacity:1;transform:translateY(-2px)}._tab_bo1mf_1:hover:before{width:30%}._tab_bo1mf_1[data-active=true]:before{width:100%}._activeTabBackground_bo1mf_72{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;pointer-events:none}._tab_bo1mf_1[data-active=true]{color:var(--color-primary);opacity:1;transform:translateY(-2px)}._tabIcon_bo1mf_85{width:18px;height:18px;flex-shrink:0;transition:all .4s cubic-bezier(.16,1,.3,1)}._tab_bo1mf_1:hover ._tabIcon_bo1mf_85{transform:rotate(5deg) scale(1.1)}._tab_bo1mf_1[data-active=true] ._tabIcon_bo1mf_85{transform:rotate(0) scale(1.15);filter:drop-shadow(0 2px 4px rgba(var(--color-primary-rgb),.3))}._tab_bo1mf_1:active{transform:translateY(0)}._tab_bo1mf_1:active ._tabIcon_bo1mf_85{transform:scale(.95)}