@shivamjadhav28/timeline-track 0.1.1 → 0.1.2

package/dist/timeline-track.cjs

@@ -1,14 +1,20 @@
-(function(g,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react"),require("styled-components"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","styled-components","lucide-react"],T):(g=typeof globalThis<"u"?globalThis:g||self,T(g.TimelineTrack={},g.React,g.styled,g.LucideReact))})(this,(function(g,T,a,E){"use strict";var M={exports:{}},C={};var re;function ae(){if(re)return C;re=1;var r=Symbol.for("react.transitional.element"),$=Symbol.for("react.fragment");function b(x,d,u){var _=null;if(u!==void 0&&(_=""+u),d.key!==void 0&&(_=""+d.key),"key"in d){u={};for(var v in d)v!=="key"&&(u[v]=d[v])}else u=d;return d=u.ref,{$$typeof:r,type:x,key:_,ref:d!==void 0?d:null,props:u}}return C.Fragment=$,C.jsx=b,C.jsxs=b,C}var N={};var te;function se(){return te||(te=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===l?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case D:return"Fragment";case k:return"Profiler";case G:return"StrictMode";case q:return"Suspense";case R:return"SuspenseList";case Q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case f:return"Portal";case L:return e.displayName||"Context";case j:return(e._context.displayName||"Context")+".Consumer";case z:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Z:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case y:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function $(e){return""+e}function b(e){try{$(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),$(e)}}function x(e){if(e===D)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function d(){var e=s.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function _(e){if(m.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function v(e,t){function n(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function V(){var e=r(this.type);return p[e]||(p[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function H(e,t,n,i,X,K){var c=n.ref;return e={$$typeof:U,type:e,key:t,props:n,_owner:i},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:V}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function F(e,t,n,i,X,K){var c=t.children;if(c!==void 0)if(i)if(S(c)){for(i=0;i<c.length;i++)I(c[i]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else I(c);if(m.call(t,"key")){c=r(e);var A=Object.keys(t).filter(function(ke){return ke!=="key"});i=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Y[c+i]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(b,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react"),require("styled-components"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","react","styled-components","lucide-react"],v):(b=typeof globalThis<"u"?globalThis:b||self,v(b.TimelineTrack={},b.React,b.styled,b.LucideReact))})(this,(function(b,v,a,T){"use strict";var M={exports:{}},C={};var re;function ae(){if(re)return C;re=1;var r=Symbol.for("react.transitional.element"),j=Symbol.for("react.fragment");function x(h,u,d){var E=null;if(d!==void 0&&(E=""+d),u.key!==void 0&&(E=""+u.key),"key"in u){d={};for(var w in u)w!=="key"&&(d[w]=u[w])}else d=u;return u=d.ref,{$$typeof:r,type:h,key:E,ref:u!==void 0?u:null,props:d}}return C.Fragment=j,C.jsx=x,C.jsxs=x,C}var N={};var te;function ie(){return te||(te=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===l?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case D:return"Fragment";case k:return"Profiler";case G:return"StrictMode";case q:return"Suspense";case R:return"SuspenseList";case Q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case f:return"Portal";case L:return e.displayName||"Context";case _:return(e._context.displayName||"Context")+".Consumer";case z:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Z:return t=e.displayName||null,t!==null?t:r(e.type)||"Memo";case y:t=e._payload,e=e._init;try{return r(e(t))}catch{}}return null}function j(e){return""+e}function x(e){try{j(e);var t=!1}catch{t=!0}if(t){t=console;var o=t.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),j(e)}}function h(e){if(e===D)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function u(){var e=i.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function E(e){if(m.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function w(e,t){function o(){J||(J=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function V(){var e=r(this.type);return p[e]||(p[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function H(e,t,o,s,X,K){var c=o.ref;return e={$$typeof:U,type:e,key:t,props:o,_owner:s},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:V}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function F(e,t,o,s,X,K){var c=t.children;if(c!==void 0)if(s)if(S(c)){for(s=0;s<c.length;s++)I(c[s]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else I(c);if(m.call(t,"key")){c=r(e);var A=Object.keys(t).filter(function(ke){return ke!=="key"});s=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Y[c+s]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,i,c,A,c),Y[c+i]=!0)}if(c=null,n!==void 0&&(b(n),c=""+n),_(t)&&(b(t.key),c=""+t.key),"key"in t){n={};for(var ee in t)ee!=="key"&&(n[ee]=t[ee])}else n=t;return c&&v(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),H(e,c,n,d(),X,K)}function I(e){W(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?W(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function W(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var w=T,U=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),D=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),k=Symbol.for("react.profiler"),j=Symbol.for("react.consumer"),L=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),q=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),Z=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),l=Symbol.for("react.client.reference"),s=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,m=Object.prototype.hasOwnProperty,S=Array.isArray,h=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var J,p={},O=w.react_stack_bottom_frame.bind(w,u)(),P=h(x(u)),Y={};N.Fragment=D,N.jsx=function(e,t,n){var i=1e4>s.recentlyCreatedOwnerStacks++;return F(e,t,n,!1,i?Error("react-stack-top-frame"):O,i?h(x(e)):P)},N.jsxs=function(e,t,n){var i=1e4>s.recentlyCreatedOwnerStacks++;return F(e,t,n,!0,i?Error("react-stack-top-frame"):O,i?h(x(e)):P)}})()),N}var oe;function ie(){return oe||(oe=1,process.env.NODE_ENV==="production"?M.exports=ae():M.exports=se()),M.exports}var o=ie();const ce={primary:"#3b82f6",success:"#10b981",danger:"#ef4444",muted:"#0f172a",card:"#ffffff",grid:"#f1f5f9",border:"#e2e8f0"},le=a.div`
+  <%s key={someKey} {...props} />`,s,c,A,c),Y[c+s]=!0)}if(c=null,o!==void 0&&(x(o),c=""+o),E(t)&&(x(t.key),c=""+t.key),"key"in t){o={};for(var ee in t)ee!=="key"&&(o[ee]=t[ee])}else o=t;return c&&w(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),H(e,c,o,u(),X,K)}function I(e){W(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?W(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function W(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var $=v,U=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),D=Symbol.for("react.fragment"),G=Symbol.for("react.strict_mode"),k=Symbol.for("react.profiler"),_=Symbol.for("react.consumer"),L=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),q=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),Z=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),Q=Symbol.for("react.activity"),l=Symbol.for("react.client.reference"),i=$.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,m=Object.prototype.hasOwnProperty,S=Array.isArray,g=console.createTask?console.createTask:function(){return null};$={react_stack_bottom_frame:function(e){return e()}};var J,p={},O=$.react_stack_bottom_frame.bind($,d)(),P=g(h(d)),Y={};N.Fragment=D,N.jsx=function(e,t,o){var s=1e4>i.recentlyCreatedOwnerStacks++;return F(e,t,o,!1,s?Error("react-stack-top-frame"):O,s?g(h(e)):P)},N.jsxs=function(e,t,o){var s=1e4>i.recentlyCreatedOwnerStacks++;return F(e,t,o,!0,s?Error("react-stack-top-frame"):O,s?g(h(e)):P)}})()),N}var ne;function se(){return ne||(ne=1,process.env.NODE_ENV==="production"?M.exports=ae():M.exports=ie()),M.exports}var n=se();const ce={primary:"#3b82f6",success:"#10b981",danger:"#ef4444",muted:"#0f172a",card:"#ffffff",grid:"#f1f5f9",border:"#e2e8f0"},le=a.div`
   padding: 30px;
   background: #f8fafc;
   min-height: 100vh;
   font-family: 'Segoe UI', Tahoma, sans-serif;
-`,ue=a.div`
+  @media (max-width: 900px) {
+    padding: 20px;
+  }
+  @media (max-width: 640px) {
+    padding: 16px;
+  }
+`,de=a.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -18,6 +24,12 @@ React keys must be passed directly to JSX without using spread:
   color: #1e293b;
   border-radius: 12px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  gap: 12px;
+  flex-wrap: wrap;
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 `,B=a.button`
   background: #1e293b;
   color: white;
@@ -29,12 +41,15 @@ React keys must be passed directly to JSX without using spread:
   align-items: center;
   gap: 8px;
   &:hover { background: #334155; }
-`,de=a.div`
+`,ue=a.div`
   position: relative;
   background: ${r=>r.$card};
   border: 1px solid ${r=>r.$border};
   border-radius: 12px;
   overflow: hidden;
+  @media (max-width: 900px) {
+    overflow-x: auto;
+  }
 `,fe=a.div`
   position: absolute;
   top: 0;
@@ -44,6 +59,13 @@ React keys must be passed directly to JSX without using spread:
   display: grid;
   grid-template-columns: repeat(${r=>r.$windowDays}, 1fr);
   pointer-events: none;
+  min-width: 700px;
+  @media (max-width: 900px) {
+    min-width: 600px;
+  }
+  @media (max-width: 640px) {
+    min-width: 520px;
+  }
 `,pe=a.div`
   border-right: 1px solid ${r=>r.$grid};
   display: flex;
@@ -58,7 +80,12 @@ React keys must be passed directly to JSX without using spread:
   border-bottom: 1px solid #f1f5f9;
   position: relative;
   &:last-child { border-bottom: none; }
-`,be=a.div`
+  @media (max-width: 640px) {
+    height: auto;
+    min-height: 96px;
+    flex-direction: column;
+  }
+`,xe=a.div`
   width: ${r=>r.$sidebarWidth}px;
   min-width: ${r=>r.$sidebarWidth}px;
   background: #fcfcfd;
@@ -69,12 +96,31 @@ React keys must be passed directly to JSX without using spread:
   color: #1e293b;
   border-right: 2px solid #f1f5f9;
   z-index: 10;
-`,xe=a.div`
+  @media (max-width: 900px) {
+    width: 180px;
+    min-width: 180px;
+  }
+  @media (max-width: 640px) {
+    width: 100%;
+    min-width: 0;
+    border-right: none;
+    border-bottom: 1px solid #f1f5f9;
+    padding: 12px 16px;
+  }
+`,he=a.div`
   flex-grow: 1;
   position: relative;
   display: flex;
   align-items: center;
-`,ge=a.div`
+  min-width: 700px;
+  @media (max-width: 900px) {
+    min-width: 600px;
+  }
+  @media (max-width: 640px) {
+    min-width: 520px;
+    padding: 8px 0 12px;
+  }
+`,be=a.div`
   position: absolute;
   left: ${r=>r.$left}%;
   width: ${r=>r.$width}%;
@@ -88,16 +134,16 @@ React keys must be passed directly to JSX without using spread:
   justify-content: space-between;
   align-items: center;
   padding: 0 5px;
-`,he=a.keyframes`
+`,ge=a.keyframes`
   from { transform: scaleX(0); opacity: 0.4; }
   to { transform: scaleX(1); opacity: 1; }
-`,ne=a.keyframes`
+`,oe=a.keyframes`
   0% { transform: scale(0.85); opacity: 0.6; }
   100% { transform: scale(1); opacity: 1; }
-`,ve=a.keyframes`
+`,we=a.keyframes`
   0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0.0); }
   50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
-`,Te=a.div`
+`,ve=a.div`
   position: absolute;
   top: 50%;
   left: 0;
@@ -106,8 +152,8 @@ React keys must be passed directly to JSX without using spread:
   background: ${r=>r.$color};
   z-index: 0;
   transform-origin: left center;
-  animation: ${he} 500ms ease;
-`,Ee=a.div`
+  animation: ${ge} 500ms ease;
+`,Te=a.div`
   position: absolute;
   left: ${r=>r.$percent}%;
   transform: translateX(-50%);
@@ -115,7 +161,7 @@ React keys must be passed directly to JSX without using spread:
   display: flex;
   flex-direction: column;
   align-items: center;
-`,_e=a.div`
+`,Ee=a.div`
   width: 30px;
   height: 30px;
   background: white;
@@ -126,9 +172,9 @@ React keys must be passed directly to JSX without using spread:
   justify-content: center;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   transition: transform 200ms ease, box-shadow 200ms ease;
-  animation: ${ne} 320ms ease;
+  animation: ${oe} 320ms ease;
   ${r=>r.$pulse&&a.css`
-    animation: ${ne} 320ms ease, ${ve} 1.6s ease-in-out infinite;
+    animation: ${oe} 320ms ease, ${we} 1.6s ease-in-out infinite;
   `}
   ${r=>r.$late&&a.css`
     box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
@@ -136,14 +182,14 @@ React keys must be passed directly to JSX without using spread:
   &:hover {
     transform: scale(1.06);
   }
-`,je=a.div`
+`,_e=a.div`
   position: absolute;
   top: 35px;
   font-size: 10px;
   font-weight: 700;
   white-space: nowrap;
   color: #334155;
-`,$e=a.div`
+`,je=a.div`
   position: absolute;
   left: calc(${r=>r.$sidebarWidth}px + ${r=>r.$percent}%);
   top: 0; bottom: 0;
@@ -154,4 +200,4 @@ React keys must be passed directly to JSX without using spread:
 `;a.keyframes`
   0%, 100% { opacity: 0.4; }
   50% { opacity: 1; }
-`;function we({projects:r,viewDate:$,windowDays:b=7,onViewDateChange:x,showTodayLine:d=!0,sidebarWidth:u=220,rowHeight:_=120,rangeIconSize:v=16,showHeader:V=!0,title:H="Team Roadmap",prevLabel:F="Day",nextLabel:I="Day",todayLabel:W="Today",className:w,colors:U}){const f={...ce,...U},[D,G]=T.useState(new Date),k=$??D,j=new Date,L=T.useMemo(()=>Array.from({length:b},(l,s)=>{const m=new Date(k);return m.setDate(k.getDate()-Math.floor(b/2)+s),m}),[k,b]),z=L[0].getTime(),q=L[b-1].getTime()+864e5,R=l=>{const s=(l.getTime()-z)/(q-z)*100;return Math.max(-10,Math.min(110,s))},Z=(l,s)=>{const m=R(l),S=R(s);return{left:m,width:Math.max(0,S-m)}},y=l=>{const s=new Date(k);s.setDate(s.getDate()+l),x?x(s):G(s)},Q=()=>{x?x(new Date):G(new Date)};return o.jsxs(le,{className:w,children:[V&&o.jsxs(ue,{children:[o.jsx("h2",{style:{margin:0},children:H}),o.jsxs("div",{style:{display:"flex",gap:"10px"},children:[o.jsxs(B,{onClick:()=>y(-1),children:[o.jsx(E.ChevronLeft,{size:18})," ",F]}),o.jsxs(B,{onClick:Q,children:[o.jsx(E.Calendar,{size:18})," ",W]}),o.jsxs(B,{onClick:()=>y(1),children:[I," ",o.jsx(E.ChevronRight,{size:18})]})]})]}),o.jsxs(de,{$border:f.border,$card:f.card,children:[o.jsx(fe,{$sidebarWidth:u,$windowDays:b,children:L.map((l,s)=>o.jsx(pe,{$grid:f.grid,children:l.toLocaleDateString("en-US",{weekday:"short",day:"numeric"})},s))}),d&&j.getTime()>=z&&j.getTime()<=q&&o.jsx($e,{$percent:R(j),$sidebarWidth:u,$color:f.danger}),r.map(l=>{const s=Z(l.projectStart,l.projectEnd),m=l.milestones.every(p=>p.status==="completed"||p.status==="success"),S=!m&&j>l.projectEnd,h=m?f.success:S?f.danger:f.primary,J=m?"rgba(16, 185, 129, 0.12)":S?"rgba(239, 68, 68, 0.12)":"rgba(59, 130, 246, 0.08)";return o.jsxs(me,{$rowHeight:_,children:[o.jsx(be,{$sidebarWidth:u,children:l.projectName}),o.jsxs(xe,{children:[o.jsx(Te,{$color:f.muted}),s.width>0&&o.jsxs(ge,{$left:s.left,$width:s.width,$color:h,$bg:J,children:[o.jsx(E.Play,{size:v,color:h,fill:h}),o.jsx(E.Flag,{size:v,color:h,fill:h})]}),l.milestones.map(p=>{const O=R(p.endDate);if(O<0||O>100)return null;const P=p.status==="completed"||p.status==="success",Y=p.status==="in-progress"&&j>p.endDate,e=P?f.success:Y?f.danger:f.primary;return o.jsxs(Ee,{$percent:O,children:[o.jsx(_e,{$color:e,$pulse:P,$late:Y,children:P?o.jsx(E.Trophy,{size:14,color:e}):o.jsx(E.Clock,{size:14,color:e})}),o.jsx(je,{children:p.name})]},p.id)})]})]},l.id)})]})]})}g.TimelineTrack=we,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
+`;function $e({projects:r,viewDate:j,windowDays:x=7,onViewDateChange:h,showTodayLine:u=!0,sidebarWidth:d=220,rowHeight:E=120,rangeIconSize:w=16,showHeader:V=!0,title:H="Team Roadmap",prevLabel:F="Day",nextLabel:I="Day",todayLabel:W="Today",className:$,colors:U}){const f={...ce,...U},[D,G]=v.useState(new Date),k=j??D,_=new Date,L=v.useMemo(()=>Array.from({length:x},(l,i)=>{const m=new Date(k);return m.setDate(k.getDate()-Math.floor(x/2)+i),m}),[k,x]),z=L[0].getTime(),q=L[x-1].getTime()+864e5,R=l=>{const i=(l.getTime()-z)/(q-z)*100;return Math.max(-10,Math.min(110,i))},Z=(l,i)=>{const m=R(l),S=R(i);return{left:m,width:Math.max(0,S-m)}},y=l=>{const i=new Date(k);i.setDate(i.getDate()+l),h?h(i):G(i)},Q=()=>{h?h(new Date):G(new Date)};return n.jsxs(le,{className:$,children:[V&&n.jsxs(de,{children:[n.jsx("h2",{style:{margin:0},children:H}),n.jsxs("div",{style:{display:"flex",gap:"10px"},children:[n.jsxs(B,{onClick:()=>y(-1),children:[n.jsx(T.ChevronLeft,{size:18})," ",F]}),n.jsxs(B,{onClick:Q,children:[n.jsx(T.Calendar,{size:18})," ",W]}),n.jsxs(B,{onClick:()=>y(1),children:[I," ",n.jsx(T.ChevronRight,{size:18})]})]})]}),n.jsxs(ue,{$border:f.border,$card:f.card,children:[n.jsx(fe,{$sidebarWidth:d,$windowDays:x,children:L.map((l,i)=>n.jsx(pe,{$grid:f.grid,children:l.toLocaleDateString("en-US",{weekday:"short",day:"numeric"})},i))}),u&&_.getTime()>=z&&_.getTime()<=q&&n.jsx(je,{$percent:R(_),$sidebarWidth:d,$color:f.danger}),r.map(l=>{const i=Z(l.projectStart,l.projectEnd),m=l.milestones.every(p=>p.status==="completed"||p.status==="success"),S=!m&&_>l.projectEnd,g=m?f.success:S?f.danger:f.primary,J=m?"rgba(16, 185, 129, 0.12)":S?"rgba(239, 68, 68, 0.12)":"rgba(59, 130, 246, 0.08)";return n.jsxs(me,{$rowHeight:E,children:[n.jsx(xe,{$sidebarWidth:d,children:l.projectName}),n.jsxs(he,{children:[n.jsx(ve,{$color:f.muted}),i.width>0&&n.jsxs(be,{$left:i.left,$width:i.width,$color:g,$bg:J,children:[n.jsx(T.Play,{size:w,color:g,fill:g}),n.jsx(T.Flag,{size:w,color:g,fill:g})]}),l.milestones.map(p=>{const O=R(p.endDate);if(O<0||O>100)return null;const P=p.status==="completed"||p.status==="success",Y=p.status==="in-progress"&&_>p.endDate,e=P?f.success:Y?f.danger:f.primary;return n.jsxs(Te,{$percent:O,children:[n.jsx(Ee,{$color:e,$pulse:P,$late:Y,children:P?n.jsx(T.Trophy,{size:14,color:e}):n.jsx(T.Clock,{size:14,color:e})}),n.jsx(_e,{children:p.name})]},p.id)})]})]},l.id)})]})]})}b.TimelineTrack=$e,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/dist/timeline-track.mjs

@@ -1,48 +1,48 @@
-import ae, { useState as se, useMemo as ie } from "react";
-import l, { css as K, keyframes as q } from "styled-components";
-import { ChevronLeft as ce, Calendar as le, ChevronRight as de, Play as ue, Flag as fe, Trophy as pe, Clock as me } from "lucide-react";
+import ae, { useState as ie, useMemo as se } from "react";
+import c, { css as K, keyframes as q } from "styled-components";
+import { ChevronLeft as le, Calendar as ce, ChevronRight as de, Play as ue, Flag as fe, Trophy as pe, Clock as me } from "lucide-react";
 var G = { exports: {} }, N = {};
 var ee;
-function be() {
+function xe() {
   if (ee) return N;
   ee = 1;
-  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), E = /* @__PURE__ */ Symbol.for("react.fragment");
-  function b(x, u, d) {
-    var v = null;
-    if (d !== void 0 && (v = "" + d), u.key !== void 0 && (v = "" + u.key), "key" in u) {
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), $ = /* @__PURE__ */ Symbol.for("react.fragment");
+  function x(b, u, d) {
+    var w = null;
+    if (d !== void 0 && (w = "" + d), u.key !== void 0 && (w = "" + u.key), "key" in u) {
       d = {};
-      for (var h in u)
-        h !== "key" && (d[h] = u[h]);
+      for (var g in u)
+        g !== "key" && (d[g] = u[g]);
     } else d = u;
     return u = d.ref, {
       $$typeof: r,
-      type: x,
-      key: v,
+      type: b,
+      key: w,
       ref: u !== void 0 ? u : null,
       props: d
     };
   }
-  return N.Fragment = E, N.jsx = b, N.jsxs = b, N;
+  return N.Fragment = $, N.jsx = x, N.jsxs = x, N;
 }
 var D = {};
 var re;
-function xe() {
+function be() {
   return re || (re = 1, process.env.NODE_ENV !== "production" && (function() {
     function r(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === c ? null : e.displayName || e.name || null;
+        return e.$$typeof === l ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
         case O:
           return "Fragment";
-        case y:
+        case _:
           return "Profiler";
         case F:
           return "StrictMode";
         case I:
           return "Suspense";
-        case T:
+        case y:
           return "SuspenseList";
         case V:
           return "Activity";
@@ -55,14 +55,14 @@ function xe() {
             return "Portal";
           case P:
             return e.displayName || "Context";
-          case $:
+          case v:
             return (e._context.displayName || "Context") + ".Consumer";
           case A:
             var t = e.render;
             return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case B:
             return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
-          case w:
+          case T:
             t = e._payload, e = e._init;
             try {
               return r(e(t));
@@ -71,29 +71,29 @@ function xe() {
         }
       return null;
     }
-    function E(e) {
+    function $(e) {
       return "" + e;
     }
-    function b(e) {
+    function x(e) {
       try {
-        E(e);
+        $(e);
         var t = !1;
       } catch {
         t = !0;
       }
       if (t) {
         t = console;
-        var n = t.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        var n = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return n.call(
           t,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          s
-        ), E(e);
+          i
+        ), $(e);
       }
     }
-    function x(e) {
+    function b(e) {
       if (e === O) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === w)
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
         var t = r(e);
@@ -109,14 +109,14 @@ function xe() {
     function d() {
       return Error("react-stack-top-frame");
     }
-    function v(e) {
+    function w(e) {
       if (m.call(e, "key")) {
         var t = Object.getOwnPropertyDescriptor(e, "key").get;
         if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function h(e, t) {
+    function g(e, t) {
       function n() {
         W || (W = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
@@ -134,15 +134,15 @@ function xe() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function X(e, t, n, s, U, H) {
-      var i = n.ref;
+    function X(e, t, n, i, U, H) {
+      var s = n.ref;
       return e = {
         $$typeof: M,
         type: e,
         key: t,
         props: n,
-        _owner: s
-      }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
+        _owner: i
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: J
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -167,48 +167,48 @@ function xe() {
         value: H
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function L(e, t, n, s, U, H) {
-      var i = t.children;
-      if (i !== void 0)
-        if (s)
-          if (R(i)) {
-            for (s = 0; s < i.length; s++)
-              z(i[s]);
-            Object.freeze && Object.freeze(i);
+    function L(e, t, n, i, U, H) {
+      var s = t.children;
+      if (s !== void 0)
+        if (i)
+          if (R(s)) {
+            for (i = 0; i < s.length; i++)
+              z(s[i]);
+            Object.freeze && Object.freeze(s);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else z(i);
+        else z(s);
       if (m.call(t, "key")) {
-        i = r(e);
+        s = r(e);
         var S = Object.keys(t).filter(function(ne) {
           return ne !== "key";
         });
-        s = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", C[i + s] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
+        i = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", C[s + i] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          s,
           i,
+          s,
           S,
-          i
-        ), C[i + s] = !0);
+          s
+        ), C[s + i] = !0);
       }
-      if (i = null, n !== void 0 && (b(n), i = "" + n), v(t) && (b(t.key), i = "" + t.key), "key" in t) {
+      if (s = null, n !== void 0 && (x(n), s = "" + n), w(t) && (x(t.key), s = "" + t.key), "key" in t) {
         n = {};
         for (var Z in t)
           Z !== "key" && (n[Z] = t[Z]);
       } else n = t;
-      return i && h(
+      return s && g(
         n,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), X(
         e,
-        i,
+        s,
         n,
         u(),
         U,
@@ -216,52 +216,52 @@ React keys must be passed directly to JSX without using spread:
       );
     }
     function z(e) {
-      Y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === w && (e._payload.status === "fulfilled" ? Y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+      Y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? Y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
     function Y(e) {
       return typeof e == "object" && e !== null && e.$$typeof === M;
     }
-    var _ = ae, M = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), F = /* @__PURE__ */ Symbol.for("react.strict_mode"), y = /* @__PURE__ */ Symbol.for("react.profiler"), $ = /* @__PURE__ */ Symbol.for("react.consumer"), P = /* @__PURE__ */ Symbol.for("react.context"), A = /* @__PURE__ */ Symbol.for("react.forward_ref"), I = /* @__PURE__ */ Symbol.for("react.suspense"), T = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), w = /* @__PURE__ */ Symbol.for("react.lazy"), V = /* @__PURE__ */ Symbol.for("react.activity"), c = /* @__PURE__ */ Symbol.for("react.client.reference"), a = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, m = Object.prototype.hasOwnProperty, R = Array.isArray, g = console.createTask ? console.createTask : function() {
+    var E = ae, M = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), F = /* @__PURE__ */ Symbol.for("react.strict_mode"), _ = /* @__PURE__ */ Symbol.for("react.profiler"), v = /* @__PURE__ */ Symbol.for("react.consumer"), P = /* @__PURE__ */ Symbol.for("react.context"), A = /* @__PURE__ */ Symbol.for("react.forward_ref"), I = /* @__PURE__ */ Symbol.for("react.suspense"), y = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), V = /* @__PURE__ */ Symbol.for("react.activity"), l = /* @__PURE__ */ Symbol.for("react.client.reference"), a = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, m = Object.prototype.hasOwnProperty, R = Array.isArray, h = console.createTask ? console.createTask : function() {
       return null;
     };
-    _ = {
+    E = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var W, p = {}, j = _.react_stack_bottom_frame.bind(
-      _,
+    var W, p = {}, j = E.react_stack_bottom_frame.bind(
+      E,
       d
-    )(), k = g(x(d)), C = {};
+    )(), k = h(b(d)), C = {};
     D.Fragment = O, D.jsx = function(e, t, n) {
-      var s = 1e4 > a.recentlyCreatedOwnerStacks++;
+      var i = 1e4 > a.recentlyCreatedOwnerStacks++;
       return L(
         e,
         t,
         n,
         !1,
-        s ? Error("react-stack-top-frame") : j,
-        s ? g(x(e)) : k
+        i ? Error("react-stack-top-frame") : j,
+        i ? h(b(e)) : k
       );
     }, D.jsxs = function(e, t, n) {
-      var s = 1e4 > a.recentlyCreatedOwnerStacks++;
+      var i = 1e4 > a.recentlyCreatedOwnerStacks++;
       return L(
         e,
         t,
         n,
         !0,
-        s ? Error("react-stack-top-frame") : j,
-        s ? g(x(e)) : k
+        i ? Error("react-stack-top-frame") : j,
+        i ? h(b(e)) : k
       );
     };
   })()), D;
 }
 var te;
-function ge() {
-  return te || (te = 1, process.env.NODE_ENV === "production" ? G.exports = be() : G.exports = xe()), G.exports;
+function he() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? G.exports = xe() : G.exports = be()), G.exports;
 }
-var o = ge();
-const he = {
+var o = he();
+const ge = {
   primary: "#3b82f6",
   success: "#10b981",
   danger: "#ef4444",
@@ -269,12 +269,18 @@ const he = {
   card: "#ffffff",
   grid: "#f1f5f9",
   border: "#e2e8f0"
-}, ve = l.div`
+}, we = c.div`
   padding: 30px;
   background: #f8fafc;
   min-height: 100vh;
   font-family: 'Segoe UI', Tahoma, sans-serif;
-`, $e = l.div`
+  @media (max-width: 900px) {
+    padding: 20px;
+  }
+  @media (max-width: 640px) {
+    padding: 16px;
+  }
+`, ve = c.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -284,7 +290,13 @@ const he = {
   color: #1e293b;
   border-radius: 12px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-`, Q = l.button`
+  gap: 12px;
+  flex-wrap: wrap;
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`, Q = c.button`
   background: #1e293b;
   color: white;
   border: none;
@@ -295,13 +307,16 @@ const he = {
   align-items: center;
   gap: 8px;
   &:hover { background: #334155; }
-`, Ee = l.div`
+`, $e = c.div`
   position: relative;
   background: ${(r) => r.$card};
   border: 1px solid ${(r) => r.$border};
   border-radius: 12px;
   overflow: hidden;
-`, _e = l.div`
+  @media (max-width: 900px) {
+    overflow-x: auto;
+  }
+`, Ee = c.div`
   position: absolute;
   top: 0;
   left: ${(r) => r.$sidebarWidth}px;
@@ -310,7 +325,14 @@ const he = {
   display: grid;
   grid-template-columns: repeat(${(r) => r.$windowDays}, 1fr);
   pointer-events: none;
-`, ye = l.div`
+  min-width: 700px;
+  @media (max-width: 900px) {
+    min-width: 600px;
+  }
+  @media (max-width: 640px) {
+    min-width: 520px;
+  }
+`, _e = c.div`
   border-right: 1px solid ${(r) => r.$grid};
   display: flex;
   justify-content: center;
@@ -318,13 +340,18 @@ const he = {
   font-size: 11px;
   color: #94a3b8;
   font-weight: 600;
-`, Te = l.div`
+`, ye = c.div`
   display: flex;
   height: ${(r) => r.$rowHeight}px;
   border-bottom: 1px solid #f1f5f9;
   position: relative;
   &:last-child { border-bottom: none; }
-`, we = l.div`
+  @media (max-width: 640px) {
+    height: auto;
+    min-height: 96px;
+    flex-direction: column;
+  }
+`, Te = c.div`
   width: ${(r) => r.$sidebarWidth}px;
   min-width: ${(r) => r.$sidebarWidth}px;
   background: #fcfcfd;
@@ -335,12 +362,31 @@ const he = {
   color: #1e293b;
   border-right: 2px solid #f1f5f9;
   z-index: 10;
-`, Re = l.div`
+  @media (max-width: 900px) {
+    width: 180px;
+    min-width: 180px;
+  }
+  @media (max-width: 640px) {
+    width: 100%;
+    min-width: 0;
+    border-right: none;
+    border-bottom: 1px solid #f1f5f9;
+    padding: 12px 16px;
+  }
+`, Re = c.div`
   flex-grow: 1;
   position: relative;
   display: flex;
   align-items: center;
-`, je = l.div`
+  min-width: 700px;
+  @media (max-width: 900px) {
+    min-width: 600px;
+  }
+  @media (max-width: 640px) {
+    min-width: 520px;
+    padding: 8px 0 12px;
+  }
+`, je = c.div`
   position: absolute;
   left: ${(r) => r.$left}%;
   width: ${(r) => r.$width}%;
@@ -363,7 +409,7 @@ const he = {
 `, Se = q`
   0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0.0); }
   50% { transform: scale(1.08); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
-`, Oe = l.div`
+`, Oe = c.div`
   position: absolute;
   top: 50%;
   left: 0;
@@ -373,7 +419,7 @@ const he = {
   z-index: 0;
   transform-origin: left center;
   animation: ${ke} 500ms ease;
-`, Pe = l.div`
+`, Pe = c.div`
   position: absolute;
   left: ${(r) => r.$percent}%;
   transform: translateX(-50%);
@@ -381,7 +427,7 @@ const he = {
   display: flex;
   flex-direction: column;
   align-items: center;
-`, Ae = l.div`
+`, Ae = c.div`
   width: 30px;
   height: 30px;
   background: white;
@@ -402,14 +448,14 @@ const he = {
   &:hover {
     transform: scale(1.06);
   }
-`, Ce = l.div`
+`, Ce = c.div`
   position: absolute;
   top: 35px;
   font-size: 10px;
   font-weight: 700;
   white-space: nowrap;
   color: #334155;
-`, Ne = l.div`
+`, Ne = c.div`
   position: absolute;
   left: calc(${(r) => r.$sidebarWidth}px + ${(r) => r.$percent}%);
   top: 0; bottom: 0;
@@ -424,73 +470,73 @@ q`
 `;
 function Ye({
   projects: r,
-  viewDate: E,
-  windowDays: b = 7,
-  onViewDateChange: x,
+  viewDate: $,
+  windowDays: x = 7,
+  onViewDateChange: b,
   showTodayLine: u = !0,
   sidebarWidth: d = 220,
-  rowHeight: v = 120,
-  rangeIconSize: h = 16,
+  rowHeight: w = 120,
+  rangeIconSize: g = 16,
   showHeader: J = !0,
   title: X = "Team Roadmap",
   prevLabel: L = "Day",
   nextLabel: z = "Day",
   todayLabel: Y = "Today",
-  className: _,
+  className: E,
   colors: M
 }) {
-  const f = { ...he, ...M }, [O, F] = se(/* @__PURE__ */ new Date()), y = E ?? O, $ = /* @__PURE__ */ new Date(), P = ie(() => Array.from({ length: b }, (c, a) => {
-    const m = new Date(y);
-    return m.setDate(y.getDate() - Math.floor(b / 2) + a), m;
-  }), [y, b]), A = P[0].getTime(), I = P[b - 1].getTime() + 864e5, T = (c) => {
-    const a = (c.getTime() - A) / (I - A) * 100;
+  const f = { ...ge, ...M }, [O, F] = ie(/* @__PURE__ */ new Date()), _ = $ ?? O, v = /* @__PURE__ */ new Date(), P = se(() => Array.from({ length: x }, (l, a) => {
+    const m = new Date(_);
+    return m.setDate(_.getDate() - Math.floor(x / 2) + a), m;
+  }), [_, x]), A = P[0].getTime(), I = P[x - 1].getTime() + 864e5, y = (l) => {
+    const a = (l.getTime() - A) / (I - A) * 100;
     return Math.max(-10, Math.min(110, a));
-  }, B = (c, a) => {
-    const m = T(c), R = T(a);
+  }, B = (l, a) => {
+    const m = y(l), R = y(a);
     return { left: m, width: Math.max(0, R - m) };
-  }, w = (c) => {
-    const a = new Date(y);
-    a.setDate(a.getDate() + c), x ? x(a) : F(a);
+  }, T = (l) => {
+    const a = new Date(_);
+    a.setDate(a.getDate() + l), b ? b(a) : F(a);
   }, V = () => {
-    x ? x(/* @__PURE__ */ new Date()) : F(/* @__PURE__ */ new Date());
+    b ? b(/* @__PURE__ */ new Date()) : F(/* @__PURE__ */ new Date());
   };
-  return /* @__PURE__ */ o.jsxs(ve, { className: _, children: [
-    J && /* @__PURE__ */ o.jsxs($e, { children: [
+  return /* @__PURE__ */ o.jsxs(we, { className: E, children: [
+    J && /* @__PURE__ */ o.jsxs(ve, { children: [
       /* @__PURE__ */ o.jsx("h2", { style: { margin: 0 }, children: X }),
       /* @__PURE__ */ o.jsxs("div", { style: { display: "flex", gap: "10px" }, children: [
-        /* @__PURE__ */ o.jsxs(Q, { onClick: () => w(-1), children: [
-          /* @__PURE__ */ o.jsx(ce, { size: 18 }),
+        /* @__PURE__ */ o.jsxs(Q, { onClick: () => T(-1), children: [
+          /* @__PURE__ */ o.jsx(le, { size: 18 }),
           " ",
           L
         ] }),
         /* @__PURE__ */ o.jsxs(Q, { onClick: V, children: [
-          /* @__PURE__ */ o.jsx(le, { size: 18 }),
+          /* @__PURE__ */ o.jsx(ce, { size: 18 }),
           " ",
           Y
         ] }),
-        /* @__PURE__ */ o.jsxs(Q, { onClick: () => w(1), children: [
+        /* @__PURE__ */ o.jsxs(Q, { onClick: () => T(1), children: [
           z,
           " ",
           /* @__PURE__ */ o.jsx(de, { size: 18 })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ o.jsxs(Ee, { $border: f.border, $card: f.card, children: [
-      /* @__PURE__ */ o.jsx(_e, { $sidebarWidth: d, $windowDays: b, children: P.map((c, a) => /* @__PURE__ */ o.jsx(ye, { $grid: f.grid, children: c.toLocaleDateString("en-US", { weekday: "short", day: "numeric" }) }, a)) }),
-      u && $.getTime() >= A && $.getTime() <= I && /* @__PURE__ */ o.jsx(
+    /* @__PURE__ */ o.jsxs($e, { $border: f.border, $card: f.card, children: [
+      /* @__PURE__ */ o.jsx(Ee, { $sidebarWidth: d, $windowDays: x, children: P.map((l, a) => /* @__PURE__ */ o.jsx(_e, { $grid: f.grid, children: l.toLocaleDateString("en-US", { weekday: "short", day: "numeric" }) }, a)) }),
+      u && v.getTime() >= A && v.getTime() <= I && /* @__PURE__ */ o.jsx(
         Ne,
         {
-          $percent: T($),
+          $percent: y(v),
           $sidebarWidth: d,
           $color: f.danger
         }
       ),
-      r.map((c) => {
-        const a = B(c.projectStart, c.projectEnd), m = c.milestones.every(
+      r.map((l) => {
+        const a = B(l.projectStart, l.projectEnd), m = l.milestones.every(
           (p) => p.status === "completed" || p.status === "success"
-        ), R = !m && $ > c.projectEnd, g = m ? f.success : R ? f.danger : f.primary, W = m ? "rgba(16, 185, 129, 0.12)" : R ? "rgba(239, 68, 68, 0.12)" : "rgba(59, 130, 246, 0.08)";
-        return /* @__PURE__ */ o.jsxs(Te, { $rowHeight: v, children: [
-          /* @__PURE__ */ o.jsx(we, { $sidebarWidth: d, children: c.projectName }),
+        ), R = !m && v > l.projectEnd, h = m ? f.success : R ? f.danger : f.primary, W = m ? "rgba(16, 185, 129, 0.12)" : R ? "rgba(239, 68, 68, 0.12)" : "rgba(59, 130, 246, 0.08)";
+        return /* @__PURE__ */ o.jsxs(ye, { $rowHeight: w, children: [
+          /* @__PURE__ */ o.jsx(Te, { $sidebarWidth: d, children: l.projectName }),
           /* @__PURE__ */ o.jsxs(Re, { children: [
             /* @__PURE__ */ o.jsx(Oe, { $color: f.muted }),
             a.width > 0 && /* @__PURE__ */ o.jsxs(
@@ -498,25 +544,25 @@ function Ye({
               {
                 $left: a.left,
                 $width: a.width,
-                $color: g,
+                $color: h,
                 $bg: W,
                 children: [
-                  /* @__PURE__ */ o.jsx(ue, { size: h, color: g, fill: g }),
-                  /* @__PURE__ */ o.jsx(fe, { size: h, color: g, fill: g })
+                  /* @__PURE__ */ o.jsx(ue, { size: g, color: h, fill: h }),
+                  /* @__PURE__ */ o.jsx(fe, { size: g, color: h, fill: h })
                 ]
               }
             ),
-            c.milestones.map((p) => {
-              const j = T(p.endDate);
+            l.milestones.map((p) => {
+              const j = y(p.endDate);
               if (j < 0 || j > 100) return null;
-              const k = p.status === "completed" || p.status === "success", C = p.status === "in-progress" && $ > p.endDate, e = k ? f.success : C ? f.danger : f.primary;
+              const k = p.status === "completed" || p.status === "success", C = p.status === "in-progress" && v > p.endDate, e = k ? f.success : C ? f.danger : f.primary;
               return /* @__PURE__ */ o.jsxs(Pe, { $percent: j, children: [
                 /* @__PURE__ */ o.jsx(Ae, { $color: e, $pulse: k, $late: C, children: k ? /* @__PURE__ */ o.jsx(pe, { size: 14, color: e }) : /* @__PURE__ */ o.jsx(me, { size: 14, color: e }) }),
                 /* @__PURE__ */ o.jsx(Ce, { children: p.name })
               ] }, p.id);
             })
           ] })
-        ] }, c.id);
+        ] }, l.id);
       })
     ] })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivamjadhav28/timeline-track",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Enterprise-ready React timeline component with project ranges and milestones.",
   "type": "module",
   "license": "MIT",