@infinityfx/fluid/dist/components/display/timeline.js

React UI library, using zero-runtime CSS-in-JS.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{combineClasses as r,classes as i}from"../../core/utils.js";import{Children as a}from"react";import{createStyles as n}from"../../core/style.js";const o=n("timeline",{".timeline":{display:"grid"},".d__horizontal":{gridAutoFlow:"column"},".timeline.uniform":{gridAutoColumns:"1fr",gridAutoRows:"1fr"},".event":{display:"flex",gap:"var(--f-spacing-sml)"},".d__horizontal .event":{flexDirection:"column"},".event:not(:first-child) .content":{alignSelf:"center"},".event:last-child .content":{alignSelf:"flex-end"},".d__horizontal .event:not(:first-child) .content":{paddingLeft:"var(--f-spacing-xsm)"},".d__horizontal .event:not(:last-child) .content":{paddingRight:"var(--f-spacing-xsm)"},".axis":{display:"flex",gap:"3px",alignItems:"center"},".d__vertical .axis":{flexDirection:"column"},".bullet":{position:"relative",height:"1.5em",width:"1.5em",borderRadius:"999px",border:"solid 3px var(--f-clr-grey-200)",zIndex:1,transition:"border-color .25s"},".bullet::after":{content:'""',position:"absolute",inset:"3px",borderRadius:"999px",backgroundColor:"var(--f-clr-primary-100)",opacity:0,transition:"opacity .25s"},'.bullet[data-active="true"]':{borderColor:"var(--f-clr-primary-100)"},'.bullet[data-active="true"]::after':{opacity:1},".segment":{height:"3px",backgroundColor:"var(--f-clr-grey-200)",transition:"background-color .25s",flexGrow:1},".d__horizontal .segment":{height:"3px",minWidth:"3px"},".d__vertical .segment":{width:"3px",minHeight:"3px",writingMode:"vertical-lr"},".segment:first-child":{borderStartEndRadius:"99px",borderEndEndRadius:"99px"},".segment:last-child":{borderEndStartRadius:"99px",borderStartStartRadius:"99px"},'.segment[data-active="true"]':{backgroundColor:"var(--f-clr-primary-100)"}});function l({children:n,cc:l={},active:d,direction:s="horizontal",uniform:c,reverse:m,...p}){const g=r(o,l),u=a.toArray(n);return e("div",{...p,className:i(g.timeline,g[`d__${s}`],c&&g.uniform,p.className),children:u.map(((r,i)=>{const a=m?u.length-1-i:i;return t("div",{className:g.event,children:[t("div",{className:g.axis,children:[0!==i&&e("div",{className:g.segment,"data-active":m?a+1<d:a<d}),e("div",{className:g.bullet,"data-active":a<d}),i!==u.length-1&&e("div",{className:g.segment,"data-active":m?a<d:a+1<d})]}),e("div",{className:g.content,children:r})]},i)}))})}export{l as default};
//# sourceMappingURL=timeline.js.map