@object-ui/plugin-timeline 0.3.0

package/dist/index.umd.cjs

@@ -0,0 +1,7 @@
+(function(o,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("@object-ui/components"),require("@object-ui/core")):typeof define=="function"&&define.amd?define(["exports","react","@object-ui/components","@object-ui/core"],y):(o=typeof globalThis<"u"?globalThis:o||self,y(o.ObjectUIPluginTimeline={},o.React,o.ObjectUIComponents,o.ObjectUICore))})(this,(function(o,y,v,ue){"use strict";function me(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(a,r,m.get?m:{enumerable:!0,get:()=>t[r]})}}return a.default=t,Object.freeze(a)}const T=me(y);var E={exports:{}},_={};var re;function fe(){if(re)return _;re=1;var t=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function r(m,s,c){var x=null;if(c!==void 0&&(x=""+c),s.key!==void 0&&(x=""+s.key),"key"in s){c={};for(var l in s)l!=="key"&&(c[l]=s[l])}else c=s;return s=c.ref,{$$typeof:t,type:m,key:x,ref:s!==void 0?s:null,props:c}}return _.Fragment=a,_.jsx=r,_.jsxs=r,_}var N={};var ae;function be(){return ae||(ae=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case u:return"Fragment";case ge:return"Profiler";case F:return"StrictMode";case ye:return"Suspense";case Re:return"SuspenseList";case _e: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 g:return"Portal";case we:return e.displayName||"Context";case xe:return(e._context.displayName||"Context")+".Consumer";case je:var i=e.render;return e=e.displayName,e||(e=i.displayName||i.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case De:return i=e.displayName||null,i!==null?i:t(e.type)||"Memo";case X:i=e._payload,e=e._init;try{return t(e(i))}catch{}}return null}function a(e){return""+e}function r(e){try{a(e);var i=!1}catch{i=!0}if(i){i=console;var d=i.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return d.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),a(e)}}function m(e){if(e===u)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===X)return"<...>";try{var i=t(e);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function s(){var e=Z.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function x(e){if(ie.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function l(e,i){function d(){le||(le=!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)",i))}d.isReactWarning=!0,Object.defineProperty(e,"key",{get:d,configurable:!0})}function w(){var e=t(this.type);return se[e]||(se[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 R(e,i,d,f,L,ee){var b=d.ref;return e={$$typeof:h,type:e,key:i,props:d,_owner:f},(b!==void 0?b:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):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:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:ee}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,i,d,f,L,ee){var b=i.children;if(b!==void 0)if(f)if(Ee(b)){for(f=0;f<b.length;f++)Q(b[f]);Object.freeze&&Object.freeze(b)}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 Q(b);if(ie.call(i,"key")){b=t(e);var D=Object.keys(i).filter(function(Se){return Se!=="key"});f=0<D.length?"{key: someKey, "+D.join(": ..., ")+": ...}":"{key: someKey}",de[b+f]||(D=0<D.length?"{"+D.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} />`,f,b,D,b),de[b+f]=!0)}if(b=null,d!==void 0&&(r(d),b=""+d),x(i)&&(r(i.key),b=""+i.key),"key"in i){d={};for(var te in i)te!=="key"&&(d[te]=i[te])}else d=i;return b&&l(d,typeof e=="function"?e.displayName||e.name||"Unknown":e),R(e,b,d,s(),L,ee)}function Q(e){M(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===X&&(e._payload.status==="fulfilled"?M(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function M(e){return typeof e=="object"&&e!==null&&e.$$typeof===h}var p=y,h=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),ge=Symbol.for("react.profiler"),xe=Symbol.for("react.consumer"),we=Symbol.for("react.context"),je=Symbol.for("react.forward_ref"),ye=Symbol.for("react.suspense"),Re=Symbol.for("react.suspense_list"),De=Symbol.for("react.memo"),X=Symbol.for("react.lazy"),_e=Symbol.for("react.activity"),Ne=Symbol.for("react.client.reference"),Z=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ie=Object.prototype.hasOwnProperty,Ee=Array.isArray,K=console.createTask?console.createTask:function(){return null};p={react_stack_bottom_frame:function(e){return e()}};var le,se={},oe=p.react_stack_bottom_frame.bind(p,c)(),ce=K(m(c)),de={};N.Fragment=u,N.jsx=function(e,i,d){var f=1e4>Z.recentlyCreatedOwnerStacks++;return j(e,i,d,!1,f?Error("react-stack-top-frame"):oe,f?K(m(e)):ce)},N.jsxs=function(e,i,d){var f=1e4>Z.recentlyCreatedOwnerStacks++;return j(e,i,d,!0,f?Error("react-stack-top-frame"):oe,f?K(m(e)):ce)}})()),N}var ne;function ve(){return ne||(ne=1,process.env.NODE_ENV==="production"?E.exports=fe():E.exports=be()),E.exports}var n=ve();const Te=10080*60*1e3;function pe(t){const a=t.flatMap(s=>(s.items||[]).flatMap(c=>[c.startDate,c.endDate])),r=Math.min(...a.map(s=>new Date(s).getTime())),m=Math.max(...a.map(s=>new Date(s).getTime()));return{minDate:new Date(r).toISOString().split("T")[0],maxDate:new Date(m).toISOString().split("T")[0]}}function he(t,a,r,m){const s=new Date(t).getTime(),c=new Date(a).getTime(),x=new Date(r).getTime(),w=new Date(m).getTime()-x,R=s-x,j=c-s;return{start:R/w*100,width:j/w*100}}function S(t,a){const r=new Date(t);return a==="short"?r.toLocaleDateString():a==="long"?r.toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}):r.toISOString().split("T")[0]}ue.ComponentRegistry.register("timeline",({schema:t,className:a,...r})=>{const{variant:m="vertical",items:s=[],dateFormat:c="short",onItemClick:x}=t;if(m==="vertical")return n.jsx(Y,{className:a,...r,children:s.map((l,w)=>n.jsxs($,{className:l.className,children:[n.jsx(k,{variant:l.variant||"default",children:l.icon&&n.jsx("span",{className:"text-xs",children:l.icon})}),n.jsxs(z,{children:[l.time&&n.jsx(P,{dateTime:l.time,children:S(l.time,c)}),l.title&&n.jsx(O,{children:l.title}),l.description&&n.jsx(A,{children:l.description}),l.content&&v.renderChildren(l.content)]})]},w))});if(m==="horizontal")return n.jsx(U,{className:a,...r,children:s.map((l,w)=>n.jsxs(q,{className:l.className,children:[n.jsxs("div",{className:"flex flex-col items-center",children:[n.jsx(k,{variant:l.variant||"default",children:l.icon&&n.jsx("span",{className:"text-xs",children:l.icon})}),n.jsxs("div",{className:"mt-4 text-center",children:[l.time&&n.jsx(P,{dateTime:l.time,children:S(l.time,c)}),l.title&&n.jsx(O,{children:l.title}),l.description&&n.jsx(A,{className:"text-center",children:l.description}),l.content&&v.renderChildren(l.content)]})]}),w<s.length-1&&n.jsx("div",{className:"absolute left-full w-16 border-t-2 border-gray-200 top-3"})]},w))});if(m==="gantt"){const l=pe(s),w=t.minDate||l.minDate,R=t.maxDate||l.maxDate,j=t.timeScale||"month",M=(()=>{const p=[],h=new Date(w),g=new Date(R);if(j==="month"){const u=new Date(h);for(;u<=g;)p.push(u.toLocaleDateString("en-US",{month:"short",year:"numeric"})),u.setMonth(u.getMonth()+1)}else if(j==="week"){const u=new Date(h);for(;u<=g;)p.push(`Week ${Math.ceil((u.getTime()-h.getTime())/Te)+1}`),u.setDate(u.getDate()+7)}else if(j==="day"){const u=new Date(h);for(;u<=g;)p.push(u.toLocaleDateString("en-US",{month:"short",day:"numeric"})),u.setDate(u.getDate()+1)}return p})();return n.jsxs(H,{className:a,...r,children:[n.jsxs(V,{children:[n.jsx(C,{className:"flex items-center px-4 py-3",children:n.jsx("span",{className:"font-semibold text-sm",children:t.rowLabel||"Items"})}),n.jsx(G,{children:n.jsx("div",{className:"flex h-full",children:M.map((p,h)=>n.jsx("div",{className:"flex-1 px-2 py-3 border-r text-xs font-medium text-center",children:p},h))})})]}),n.jsx("div",{children:n.jsxs("div",{className:"flex",children:[n.jsx(C,{children:s.map((p,h)=>n.jsx(I,{children:n.jsx(W,{title:p.label,children:p.label})},h))}),n.jsx(G,{className:"relative",children:s.map((p,h)=>n.jsx(I,{className:"relative",children:(p.items||[]).map((g,u)=>{const F=he(g.startDate,g.endDate,w,R);return n.jsx(B,{start:F.start,width:F.width,variant:g.variant||"default",onClick:()=>x?.(g,p,h,u),title:`${g.title||""}
+${S(g.startDate,c)} - ${S(g.endDate,c)}`,children:n.jsx(J,{children:g.title})},u)})},h))})]})})]})}return null},{label:"Timeline",category:"data-display",inputs:[{name:"variant",type:"enum",enum:["vertical","horizontal","gantt"],label:"Timeline Variant",defaultValue:"vertical"},{name:"items",type:"array",label:"Timeline Items",description:"For vertical/horizontal: Array of { time, title, description, variant, icon, content }. For gantt: Array of { label, items: [{ title, startDate, endDate, variant }] }"},{name:"dateFormat",type:"enum",enum:["short","long","iso"],label:"Date Format",defaultValue:"short"},{name:"timeScale",type:"enum",enum:["day","week","month"],label:"Time Scale (Gantt only)",defaultValue:"month"},{name:"rowLabel",type:"string",label:"Row Label (Gantt only)",defaultValue:"Items"},{name:"minDate",type:"string",label:"Min Date (Gantt only)",description:"Override auto-calculated min date (YYYY-MM-DD)"},{name:"maxDate",type:"string",label:"Max Date (Gantt only)",description:"Override auto-calculated max date (YYYY-MM-DD)"},{name:"className",type:"string",label:"CSS Class"}],defaultProps:{variant:"vertical",dateFormat:"short",items:[{time:"2024-01-15",title:"Project Started",description:"Kickoff meeting and initial planning",variant:"success",icon:"🚀"},{time:"2024-02-01",title:"First Milestone",description:"Completed initial design phase",variant:"info",icon:"🎨"},{time:"2024-03-15",title:"Beta Release",description:"Released beta version to testers",variant:"warning",icon:"⚡"},{time:"2024-04-01",title:"Launch",description:"Official product launch",variant:"success",icon:"🎉"}]},examples:{vertical:{variant:"vertical",dateFormat:"long",items:[{time:"2024-01-15",title:"Project Started",description:"Kickoff meeting and initial planning",variant:"success"},{time:"2024-02-01",title:"First Milestone",description:"Completed initial design phase",variant:"info"}]},horizontal:{variant:"horizontal",dateFormat:"short",items:[{time:"2024-01-01",title:"Q1",description:"First quarter",variant:"default"},{time:"2024-04-01",title:"Q2",description:"Second quarter",variant:"info"},{time:"2024-07-01",title:"Q3",description:"Third quarter",variant:"warning"},{time:"2024-10-01",title:"Q4",description:"Fourth quarter",variant:"success"}]},gantt:{variant:"gantt",dateFormat:"short",timeScale:"month",rowLabel:"Projects",items:[{label:"Backend Development",items:[{title:"API Design",startDate:"2024-01-01",endDate:"2024-01-31",variant:"success"},{title:"Implementation",startDate:"2024-02-01",endDate:"2024-03-31",variant:"info"}]},{label:"Frontend Development",items:[{title:"UI Design",startDate:"2024-01-15",endDate:"2024-02-15",variant:"warning"},{title:"Component Dev",startDate:"2024-02-15",endDate:"2024-04-15",variant:"default"}]},{label:"Testing",items:[{title:"QA Phase",startDate:"2024-03-01",endDate:"2024-04-30",variant:"danger"}]}]}}});const Y=T.forwardRef(({className:t,...a},r)=>n.jsx("ol",{ref:r,className:v.cn("relative border-l border-gray-200",t),...a}));Y.displayName="Timeline";const $=T.forwardRef(({className:t,...a},r)=>n.jsx("li",{ref:r,className:v.cn("mb-10 ml-6",t),...a}));$.displayName="TimelineItem";const k=T.forwardRef(({className:t,variant:a="default",...r},m)=>{const s={default:"bg-gray-200 border-gray-300",success:"bg-green-200 border-green-500",warning:"bg-yellow-200 border-yellow-500",danger:"bg-red-200 border-red-500",info:"bg-blue-200 border-blue-500"};return n.jsx("div",{ref:m,className:v.cn("absolute -left-3 w-6 h-6 rounded-full border-2 flex items-center justify-center",s[a],t),...r})});k.displayName="TimelineMarker";const z=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:t,...a}));z.displayName="TimelineContent";const O=T.forwardRef(({className:t,...a},r)=>n.jsx("h3",{ref:r,className:v.cn("font-semibold text-lg mb-1",t),...a}));O.displayName="TimelineTitle";const P=T.forwardRef(({className:t,...a},r)=>n.jsx("time",{ref:r,className:v.cn("text-sm font-normal text-gray-500 mb-2 block",t),...a}));P.displayName="TimelineTime";const A=T.forwardRef(({className:t,...a},r)=>n.jsx("p",{ref:r,className:v.cn("text-base text-gray-700",t),...a}));A.displayName="TimelineDescription";const U=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("relative flex overflow-x-auto py-8",t),...a}));U.displayName="TimelineHorizontal";const q=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("flex-shrink-0 w-64 relative",t),...a}));q.displayName="TimelineHorizontalItem";const H=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("relative w-full border rounded-lg overflow-hidden",t),...a}));H.displayName="TimelineGantt";const V=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("flex border-b bg-gray-50",t),...a}));V.displayName="TimelineGanttHeader";const C=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("w-48 border-r bg-white",t),...a}));C.displayName="TimelineGanttRowLabels";const G=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("flex-1 overflow-x-auto",t),...a}));G.displayName="TimelineGanttGrid";const I=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("flex items-center border-b min-h-12",t),...a}));I.displayName="TimelineGanttRow";const W=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("px-4 py-2 font-medium text-sm truncate",t),...a}));W.displayName="TimelineGanttLabel";const B=T.forwardRef(({className:t,start:a=0,width:r=100,variant:m="default",...s},c)=>{const x={default:"bg-blue-500 hover:bg-blue-600",success:"bg-green-500 hover:bg-green-600",warning:"bg-yellow-500 hover:bg-yellow-600",danger:"bg-red-500 hover:bg-red-600",info:"bg-purple-500 hover:bg-purple-600"};return n.jsx("div",{ref:c,className:v.cn("absolute h-8 rounded-md transition-colors cursor-pointer",x[m],t),style:{left:`${a}%`,width:`${r}%`},...s})});B.displayName="TimelineGanttBar";const J=T.forwardRef(({className:t,...a},r)=>n.jsx("div",{ref:r,className:v.cn("px-2 py-1 text-white text-xs font-medium truncate",t),...a}));J.displayName="TimelineGanttBarContent",o.Timeline=Y,o.TimelineContent=z,o.TimelineDescription=A,o.TimelineGantt=H,o.TimelineGanttBar=B,o.TimelineGanttBarContent=J,o.TimelineGanttGrid=G,o.TimelineGanttHeader=V,o.TimelineGanttLabel=W,o.TimelineGanttRow=I,o.TimelineGanttRowLabels=C,o.TimelineHorizontal=U,o.TimelineHorizontalItem=q,o.TimelineItem=$,o.TimelineMarker=k,o.TimelineTime=P,o.TimelineTitle=O,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/dist/src/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from "react";
+declare const Timeline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+declare const TimelineItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+declare const TimelineMarker: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "success" | "warning" | "danger" | "info";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const TimelineTime: React.ForwardRefExoticComponent<React.TimeHTMLAttributes<HTMLTimeElement> & React.RefAttributes<HTMLTimeElement>>;
+declare const TimelineDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const TimelineHorizontal: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineHorizontalItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGantt: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttRowLabels: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttGrid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    start?: number;
+    width?: number;
+    variant?: "default" | "success" | "warning" | "danger" | "info";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineGanttBarContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Timeline, TimelineItem, TimelineMarker, TimelineContent, TimelineTitle, TimelineTime, TimelineDescription, TimelineHorizontal, TimelineHorizontalItem, TimelineGantt, TimelineGanttHeader, TimelineGanttRowLabels, TimelineGanttGrid, TimelineGanttRow, TimelineGanttLabel, TimelineGanttBar, TimelineGanttBarContent, };
+export * from './renderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,QAAQ,iHASZ,CAAA;AAGF,QAAA,MAAM,YAAY,2GAShB,CAAA;AAGF,QAAA,MAAM,cAAc;cAGN,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM;wCAsBjE,CAAA;AAGF,QAAA,MAAM,eAAe,6GASnB,CAAA;AAGF,QAAA,MAAM,aAAa,qHASjB,CAAA;AAGF,QAAA,MAAM,YAAY,mHAShB,CAAA;AAGF,QAAA,MAAM,mBAAmB,yHASvB,CAAA;AAIF,QAAA,MAAM,kBAAkB,6GAStB,CAAA;AAGF,QAAA,MAAM,sBAAsB,6GAS1B,CAAA;AAIF,QAAA,MAAM,aAAa,6GASjB,CAAA;AAGF,QAAA,MAAM,mBAAmB,6GASvB,CAAA;AAGF,QAAA,MAAM,sBAAsB,6GAS1B,CAAA;AAGF,QAAA,MAAM,iBAAiB,6GASrB,CAAA;AAGF,QAAA,MAAM,gBAAgB,6GASpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,6GAStB,CAAA;AAGF,QAAA,MAAM,gBAAgB;YAGV,MAAM;YACN,MAAM;cACJ,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM;wCA0BjE,CAAA;AAGF,QAAA,MAAM,uBAAuB,6GAS3B,CAAA;AAGF,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,uBAAuB,GACxB,CAAA;AAGD,cAAc,YAAY,CAAC"}

package/dist/src/renderer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};
+//# sourceMappingURL=renderer.d.ts.map

package/dist/src/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/renderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@object-ui/plugin-timeline",
+  "version": "0.3.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Timeline component plugin for Object UI",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-timeline"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}

package/src/index.tsx

@@ -0,0 +1,277 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { cn } from "@object-ui/components"
+
+const Timeline = React.forwardRef<
+  HTMLOListElement,
+  React.HTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn("relative border-l border-gray-200", className)}
+    {...props}
+  />
+))
+Timeline.displayName = "Timeline"
+
+const TimelineItem = React.forwardRef<
+  HTMLLIElement,
+  React.HTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("mb-10 ml-6", className)}
+    {...props}
+  />
+))
+TimelineItem.displayName = "TimelineItem"
+
+const TimelineMarker = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "success" | "warning" | "danger" | "info"
+  }
+>(({ className, variant = "default", ...props }, ref) => {
+  const variantClasses = {
+    default: "bg-gray-200 border-gray-300",
+    success: "bg-green-200 border-green-500",
+    warning: "bg-yellow-200 border-yellow-500",
+    danger: "bg-red-200 border-red-500",
+    info: "bg-blue-200 border-blue-500",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "absolute -left-3 w-6 h-6 rounded-full border-2 flex items-center justify-center",
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TimelineMarker.displayName = "TimelineMarker"
+
+const TimelineContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={className}
+    {...props}
+  />
+))
+TimelineContent.displayName = "TimelineContent"
+
+const TimelineTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold text-lg mb-1", className)}
+    {...props}
+  />
+))
+TimelineTitle.displayName = "TimelineTitle"
+
+const TimelineTime = React.forwardRef<
+  HTMLTimeElement,
+  React.TimeHTMLAttributes<HTMLTimeElement>
+>(({ className, ...props }, ref) => (
+  <time
+    ref={ref}
+    className={cn("text-sm font-normal text-gray-500 mb-2 block", className)}
+    {...props}
+  />
+))
+TimelineTime.displayName = "TimelineTime"
+
+const TimelineDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-base text-gray-700", className)}
+    {...props}
+  />
+))
+TimelineDescription.displayName = "TimelineDescription"
+
+// Horizontal Timeline Components
+const TimelineHorizontal = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative flex overflow-x-auto py-8", className)}
+    {...props}
+  />
+))
+TimelineHorizontal.displayName = "TimelineHorizontal"
+
+const TimelineHorizontalItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-shrink-0 w-64 relative", className)}
+    {...props}
+  />
+))
+TimelineHorizontalItem.displayName = "TimelineHorizontalItem"
+
+// Gantt-style Timeline Components (Airtable-like)
+const TimelineGantt = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative w-full border rounded-lg overflow-hidden", className)}
+    {...props}
+  />
+))
+TimelineGantt.displayName = "TimelineGantt"
+
+const TimelineGanttHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex border-b bg-gray-50", className)}
+    {...props}
+  />
+))
+TimelineGanttHeader.displayName = "TimelineGanttHeader"
+
+const TimelineGanttRowLabels = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("w-48 border-r bg-white", className)}
+    {...props}
+  />
+))
+TimelineGanttRowLabels.displayName = "TimelineGanttRowLabels"
+
+const TimelineGanttGrid = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 overflow-x-auto", className)}
+    {...props}
+  />
+))
+TimelineGanttGrid.displayName = "TimelineGanttGrid"
+
+const TimelineGanttRow = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center border-b min-h-12", className)}
+    {...props}
+  />
+))
+TimelineGanttRow.displayName = "TimelineGanttRow"
+
+const TimelineGanttLabel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("px-4 py-2 font-medium text-sm truncate", className)}
+    {...props}
+  />
+))
+TimelineGanttLabel.displayName = "TimelineGanttLabel"
+
+const TimelineGanttBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    start?: number
+    width?: number
+    variant?: "default" | "success" | "warning" | "danger" | "info"
+  }
+>(({ className, start = 0, width = 100, variant = "default", ...props }, ref) => {
+  const variantClasses = {
+    default: "bg-blue-500 hover:bg-blue-600",
+    success: "bg-green-500 hover:bg-green-600",
+    warning: "bg-yellow-500 hover:bg-yellow-600",
+    danger: "bg-red-500 hover:bg-red-600",
+    info: "bg-purple-500 hover:bg-purple-600",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "absolute h-8 rounded-md transition-colors cursor-pointer",
+        variantClasses[variant],
+        className
+      )}
+      style={{
+        left: `${start}%`,
+        width: `${width}%`,
+      }}
+      {...props}
+    />
+  )
+})
+TimelineGanttBar.displayName = "TimelineGanttBar"
+
+const TimelineGanttBarContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("px-2 py-1 text-white text-xs font-medium truncate", className)}
+    {...props}
+  />
+))
+TimelineGanttBarContent.displayName = "TimelineGanttBarContent"
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription,
+  TimelineHorizontal,
+  TimelineHorizontalItem,
+  TimelineGantt,
+  TimelineGanttHeader,
+  TimelineGanttRowLabels,
+  TimelineGanttGrid,
+  TimelineGanttRow,
+  TimelineGanttLabel,
+  TimelineGanttBar,
+  TimelineGanttBarContent,
+}
+
+// Export renderer to register the component with ObjectUI
+export * from './renderer';