@shivamjadhav28/timeline-track 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shivam Jadhav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# Timeline Track
+
+Enterprise-ready React timeline component for projects and milestones, with status-aware colors and range navigation.
+
+## Install
+
+```bash
+npm i @shivamjadhav/timeline-track
+```
+
+## Usage
+
+```tsx
+import { TimelineTrack, type Project } from '@shivamjadhav/timeline-track';
+
+const projects: Project[] = [
+  {
+    id: 'p1',
+    projectName: 'Cloud Migration',
+    projectStart: new Date('2026-02-10'),
+    projectEnd: new Date('2026-02-14'),
+    milestones: [
+      { id: 'm1', name: 'DB Sync', endDate: new Date('2026-02-13'), status: 'success' },
+      { id: 'm2', name: 'Security', endDate: new Date('2026-02-14'), status: 'success' },
+    ],
+  },
+];
+
+export default function Example() {
+  return <TimelineTrack projects={projects} />;
+}
+```
+
+## Props
+
+- `projects` (required): `Project[]`
+- `viewDate`: `Date` (controlled view date)
+- `onViewDateChange`: `(date: Date) => void`
+- `windowDays`: number (default `7`)
+- `showTodayLine`: boolean (default `true`)
+- `sidebarWidth`: number (default `220`)
+- `rowHeight`: number (default `120`)
+- `rangeIconSize`: number (default `16`)
+- `showHeader`: boolean (default `true`)
+- `title`: string (default `Team Roadmap`)
+- `prevLabel`: string (default `Day`)
+- `nextLabel`: string (default `Day`)
+- `todayLabel`: string (default `Today`)
+- `colors`: partial theme override
+- `className`: string
+
+## Types
+
+```ts
+export type MilestoneStatus =
+  | 'completed'
+  | 'success'
+  | 'cancelled'
+  | 'pending'
+  | 'in-progress';
+
+export interface Milestone {
+  id: string;
+  name: string;
+  endDate: Date;
+  status: MilestoneStatus;
+}
+
+export interface Project {
+  id: string;
+  projectName: string;
+  projectStart: Date;
+  projectEnd: Date;
+  milestones: Milestone[];
+}
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+## License
+
+MIT

package/dist/components/TimelineTrack.d.ts

@@ -0,0 +1,41 @@
+export type MilestoneStatus = 'completed' | 'success' | 'cancelled' | 'pending' | 'in-progress';
+export interface Milestone {
+    id: string;
+    name: string;
+    endDate: Date;
+    status: MilestoneStatus;
+}
+export interface Project {
+    id: string;
+    projectName: string;
+    projectStart: Date;
+    projectEnd: Date;
+    milestones: Milestone[];
+}
+export type TimelineColors = {
+    primary: string;
+    success: string;
+    danger: string;
+    muted: string;
+    card: string;
+    grid: string;
+    border: string;
+};
+export type TimelineProps = {
+    projects: Project[];
+    viewDate?: Date;
+    windowDays?: number;
+    onViewDateChange?: (date: Date) => void;
+    showTodayLine?: boolean;
+    sidebarWidth?: number;
+    rowHeight?: number;
+    rangeIconSize?: number;
+    showHeader?: boolean;
+    title?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    todayLabel?: string;
+    className?: string;
+    colors?: Partial<TimelineColors>;
+};
+export default function TimelineTrack({ projects, viewDate, windowDays, onViewDateChange, showTodayLine, sidebarWidth, rowHeight, rangeIconSize, showHeader, title, prevLabel, nextLabel, todayLabel, className, colors, }: TimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimelineTrack } from './components/TimelineTrack';
+export type { Milestone, MilestoneStatus, Project, TimelineColors, TimelineProps, } from './components/TimelineTrack';

package/dist/timeline-track.cjs

@@ -0,0 +1,157 @@
+(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:
+  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`
+  padding: 30px;
+  background: #f8fafc;
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+`,ue=a.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  background: white;
+  padding: 15px 25px;
+  color: #1e293b;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+`,B=a.button`
+  background: #1e293b;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  &:hover { background: #334155; }
+`,de=a.div`
+  position: relative;
+  background: ${r=>r.$card};
+  border: 1px solid ${r=>r.$border};
+  border-radius: 12px;
+  overflow: hidden;
+`,fe=a.div`
+  position: absolute;
+  top: 0;
+  left: ${r=>r.$sidebarWidth}px;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-columns: repeat(${r=>r.$windowDays}, 1fr);
+  pointer-events: none;
+`,pe=a.div`
+  border-right: 1px solid ${r=>r.$grid};
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+`,me=a.div`
+  display: flex;
+  height: ${r=>r.$rowHeight}px;
+  border-bottom: 1px solid #f1f5f9;
+  position: relative;
+  &:last-child { border-bottom: none; }
+`,be=a.div`
+  width: ${r=>r.$sidebarWidth}px;
+  min-width: ${r=>r.$sidebarWidth}px;
+  background: #fcfcfd;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-weight: 700;
+  color: #1e293b;
+  border-right: 2px solid #f1f5f9;
+  z-index: 10;
+`,xe=a.div`
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+`,ge=a.div`
+  position: absolute;
+  left: ${r=>r.$left}%;
+  width: ${r=>r.$width}%;
+  height: 40px;
+  background: ${r=>r.$bg};
+  border: 2px dashed ${r=>r.$color};
+  border-radius: 8px;
+  z-index: 1;
+  transition: all 0.4s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+`,he=a.keyframes`
+  from { transform: scaleX(0); opacity: 0.4; }
+  to { transform: scaleX(1); opacity: 1; }
+`,ne=a.keyframes`
+  0% { transform: scale(0.85); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+`,ve=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`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: ${r=>r.$color};
+  z-index: 0;
+  transform-origin: left center;
+  animation: ${he} 500ms ease;
+`,Ee=a.div`
+  position: absolute;
+  left: ${r=>r.$percent}%;
+  transform: translateX(-50%);
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`,_e=a.div`
+  width: 30px;
+  height: 30px;
+  background: white;
+  border: 2px solid ${r=>r.$color};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  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;
+  ${r=>r.$pulse&&a.css`
+    animation: ${ne} 320ms ease, ${ve} 1.6s ease-in-out infinite;
+  `}
+  ${r=>r.$late&&a.css`
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
+  `}
+  &:hover {
+    transform: scale(1.06);
+  }
+`,je=a.div`
+  position: absolute;
+  top: 35px;
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+  color: #334155;
+`,$e=a.div`
+  position: absolute;
+  left: calc(${r=>r.$sidebarWidth}px + ${r=>r.$percent}%);
+  top: 0; bottom: 0;
+  width: 2px;
+  background: ${r=>r.$color};
+  z-index: 20;
+  animation: pulse 1.6s ease-in-out infinite;
+`;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"})}));

package/dist/timeline-track.mjs

@@ -0,0 +1,526 @@
+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";
+var G = { exports: {} }, N = {};
+var ee;
+function be() {
+  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) {
+      d = {};
+      for (var h in u)
+        h !== "key" && (d[h] = u[h]);
+    } else d = u;
+    return u = d.ref, {
+      $$typeof: r,
+      type: x,
+      key: v,
+      ref: u !== void 0 ? u : null,
+      props: d
+    };
+  }
+  return N.Fragment = E, N.jsx = b, N.jsxs = b, N;
+}
+var D = {};
+var re;
+function xe() {
+  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;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case y:
+          return "Profiler";
+        case F:
+          return "StrictMode";
+        case I:
+          return "Suspense";
+        case T:
+          return "SuspenseList";
+        case V:
+          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 P:
+            return e.displayName || "Context";
+          case $:
+            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:
+            t = e._payload, e = e._init;
+            try {
+              return r(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function E(e) {
+      return "" + e;
+    }
+    function b(e) {
+      try {
+        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";
+        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);
+      }
+    }
+    function x(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === w)
+        return "<...>";
+      try {
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function u() {
+      var e = a.A;
+      return e === null ? null : e.getOwner();
+    }
+    function d() {
+      return Error("react-stack-top-frame");
+    }
+    function v(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 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)",
+          t
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function J() {
+      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 X(e, t, n, s, U, H) {
+      var i = n.ref;
+      return e = {
+        $$typeof: M,
+        type: e,
+        key: t,
+        props: n,
+        _owner: s
+      }, (i !== void 0 ? i : 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", {
+        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: U
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        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);
+          } 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);
+      if (m.call(t, "key")) {
+        i = 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(
+          `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,
+          i
+        ), C[i + s] = !0);
+      }
+      if (i = null, n !== void 0 && (b(n), i = "" + n), v(t) && (b(t.key), i = "" + t.key), "key" in t) {
+        n = {};
+        for (var Z in t)
+          Z !== "key" && (n[Z] = t[Z]);
+      } else n = t;
+      return i && h(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), X(
+        e,
+        i,
+        n,
+        u(),
+        U,
+        H
+      );
+    }
+    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));
+    }
+    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() {
+      return null;
+    };
+    _ = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var W, p = {}, j = _.react_stack_bottom_frame.bind(
+      _,
+      d
+    )(), k = g(x(d)), C = {};
+    D.Fragment = O, D.jsx = function(e, t, n) {
+      var s = 1e4 > a.recentlyCreatedOwnerStacks++;
+      return L(
+        e,
+        t,
+        n,
+        !1,
+        s ? Error("react-stack-top-frame") : j,
+        s ? g(x(e)) : k
+      );
+    }, D.jsxs = function(e, t, n) {
+      var s = 1e4 > a.recentlyCreatedOwnerStacks++;
+      return L(
+        e,
+        t,
+        n,
+        !0,
+        s ? Error("react-stack-top-frame") : j,
+        s ? g(x(e)) : k
+      );
+    };
+  })()), D;
+}
+var te;
+function ge() {
+  return te || (te = 1, process.env.NODE_ENV === "production" ? G.exports = be() : G.exports = xe()), G.exports;
+}
+var o = ge();
+const he = {
+  primary: "#3b82f6",
+  success: "#10b981",
+  danger: "#ef4444",
+  muted: "#0f172a",
+  card: "#ffffff",
+  grid: "#f1f5f9",
+  border: "#e2e8f0"
+}, ve = l.div`
+  padding: 30px;
+  background: #f8fafc;
+  min-height: 100vh;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+`, $e = l.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  background: white;
+  padding: 15px 25px;
+  color: #1e293b;
+  border-radius: 12px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+`, Q = l.button`
+  background: #1e293b;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  &:hover { background: #334155; }
+`, Ee = l.div`
+  position: relative;
+  background: ${(r) => r.$card};
+  border: 1px solid ${(r) => r.$border};
+  border-radius: 12px;
+  overflow: hidden;
+`, _e = l.div`
+  position: absolute;
+  top: 0;
+  left: ${(r) => r.$sidebarWidth}px;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  grid-template-columns: repeat(${(r) => r.$windowDays}, 1fr);
+  pointer-events: none;
+`, ye = l.div`
+  border-right: 1px solid ${(r) => r.$grid};
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+`, Te = l.div`
+  display: flex;
+  height: ${(r) => r.$rowHeight}px;
+  border-bottom: 1px solid #f1f5f9;
+  position: relative;
+  &:last-child { border-bottom: none; }
+`, we = l.div`
+  width: ${(r) => r.$sidebarWidth}px;
+  min-width: ${(r) => r.$sidebarWidth}px;
+  background: #fcfcfd;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-weight: 700;
+  color: #1e293b;
+  border-right: 2px solid #f1f5f9;
+  z-index: 10;
+`, Re = l.div`
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+`, je = l.div`
+  position: absolute;
+  left: ${(r) => r.$left}%;
+  width: ${(r) => r.$width}%;
+  height: 40px;
+  background: ${(r) => r.$bg};
+  border: 2px dashed ${(r) => r.$color};
+  border-radius: 8px;
+  z-index: 1;
+  transition: all 0.4s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5px;
+`, ke = q`
+  from { transform: scaleX(0); opacity: 0.4; }
+  to { transform: scaleX(1); opacity: 1; }
+`, oe = q`
+  0% { transform: scale(0.85); opacity: 0.6; }
+  100% { transform: scale(1); opacity: 1; }
+`, 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`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: ${(r) => r.$color};
+  z-index: 0;
+  transform-origin: left center;
+  animation: ${ke} 500ms ease;
+`, Pe = l.div`
+  position: absolute;
+  left: ${(r) => r.$percent}%;
+  transform: translateX(-50%);
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, Ae = l.div`
+  width: 30px;
+  height: 30px;
+  background: white;
+  border: 2px solid ${(r) => r.$color};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  transition: transform 200ms ease, box-shadow 200ms ease;
+  animation: ${oe} 320ms ease;
+  ${(r) => r.$pulse && K`
+    animation: ${oe} 320ms ease, ${Se} 1.6s ease-in-out infinite;
+  `}
+  ${(r) => r.$late && K`
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
+  `}
+  &:hover {
+    transform: scale(1.06);
+  }
+`, Ce = l.div`
+  position: absolute;
+  top: 35px;
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+  color: #334155;
+`, Ne = l.div`
+  position: absolute;
+  left: calc(${(r) => r.$sidebarWidth}px + ${(r) => r.$percent}%);
+  top: 0; bottom: 0;
+  width: 2px;
+  background: ${(r) => r.$color};
+  z-index: 20;
+  animation: pulse 1.6s ease-in-out infinite;
+`;
+q`
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+`;
+function Ye({
+  projects: r,
+  viewDate: E,
+  windowDays: b = 7,
+  onViewDateChange: x,
+  showTodayLine: u = !0,
+  sidebarWidth: d = 220,
+  rowHeight: v = 120,
+  rangeIconSize: h = 16,
+  showHeader: J = !0,
+  title: X = "Team Roadmap",
+  prevLabel: L = "Day",
+  nextLabel: z = "Day",
+  todayLabel: Y = "Today",
+  className: _,
+  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;
+    return Math.max(-10, Math.min(110, a));
+  }, B = (c, a) => {
+    const m = T(c), R = T(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);
+  }, V = () => {
+    x ? x(/* @__PURE__ */ new Date()) : F(/* @__PURE__ */ new Date());
+  };
+  return /* @__PURE__ */ o.jsxs(ve, { className: _, children: [
+    J && /* @__PURE__ */ o.jsxs($e, { 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 }),
+          " ",
+          L
+        ] }),
+        /* @__PURE__ */ o.jsxs(Q, { onClick: V, children: [
+          /* @__PURE__ */ o.jsx(le, { size: 18 }),
+          " ",
+          Y
+        ] }),
+        /* @__PURE__ */ o.jsxs(Q, { onClick: () => w(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(
+        Ne,
+        {
+          $percent: T($),
+          $sidebarWidth: d,
+          $color: f.danger
+        }
+      ),
+      r.map((c) => {
+        const a = B(c.projectStart, c.projectEnd), m = c.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 }),
+          /* @__PURE__ */ o.jsxs(Re, { children: [
+            /* @__PURE__ */ o.jsx(Oe, { $color: f.muted }),
+            a.width > 0 && /* @__PURE__ */ o.jsxs(
+              je,
+              {
+                $left: a.left,
+                $width: a.width,
+                $color: g,
+                $bg: W,
+                children: [
+                  /* @__PURE__ */ o.jsx(ue, { size: h, color: g, fill: g }),
+                  /* @__PURE__ */ o.jsx(fe, { size: h, color: g, fill: g })
+                ]
+              }
+            ),
+            c.milestones.map((p) => {
+              const j = T(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;
+              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);
+      })
+    ] })
+  ] });
+}
+export {
+  Ye as TimelineTrack
+};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@shivamjadhav28/timeline-track",
+  "version": "0.1.0",
+  "description": "Enterprise-ready React timeline component with project ranges and milestones.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Shivam Jadhav",
+  "keywords": [
+    "timeline",
+    "react",
+    "milestone",
+    "project",
+    "roadmap",
+    "enterprise"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/timeline-track.cjs",
+  "module": "./dist/timeline-track.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/timeline-track.mjs",
+      "require": "./dist/timeline-track.cjs"
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.lib.json",
+    "build:types": "tsc -p tsconfig.lib.json",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "styled-components": "^6.3.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/styled-components": "^5.1.36",
+    "@types/minimatch": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "styled-components": "^6.3.9",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}