Timeline

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineAtAGlance(Component):
    template = """
      <c-CTimeline label="Shipment progress">
        <c-CTimelineItem state="complete">
          <c-fill name="opposite"><time datetime="2026-08-18">18 Aug</time></c-fill>
          <c-fill name="default"><strong>Order confirmed</strong><br />Payment received</c-fill>
        </c-CTimelineItem>
        <c-CTimelineItem state="current">
          <c-fill name="opposite"><time datetime="2026-08-21">Today</time></c-fill>
          <c-fill name="default"><strong>In transit</strong><br />Departed the regional hub</c-fill>
        </c-CTimelineItem>
        <c-CTimelineItem state="pending"><strong>Delivered</strong></c-CTimelineItem>
      </c-CTimeline>
    """


preview = TimelineAtAGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineActivity(Component):
    template = """
      <c-CTimeline label="Repository activity" density="compact">
        <c-CTimelineItem>
          <c-fill name="opposite"><time datetime="2026-08-21T09:15:00Z">09:15</time></c-fill>
          <c-fill name="default">
            <strong>Mina opened pull request #184</strong><p>Improve invoice import diagnostics.</p>
          </c-fill>
        </c-CTimelineItem>
        <c-CTimelineItem>
          <c-fill name="opposite"><time datetime="2026-08-21T10:04:00Z">10:04</time></c-fill>
          <c-fill name="default"><strong>Leo approved the changes</strong><p>All required checks passed.</p></c-fill>
        </c-CTimelineItem>
        <c-CTimelineItem state="current">
          <c-fill name="opposite"><time datetime="2026-08-21T10:12:00Z">10:12</time></c-fill>
          <c-fill name="default">
            <strong>Ready to merge</strong><p><a href="#review">Review the final diff</a></p>
          </c-fill>
        </c-CTimelineItem>
      </c-CTimeline>
    """
    css = ":where(.cui-timeline__content p){margin:.25rem 0 0}"


preview = TimelineActivity()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineStatus(Component):
    template = """
      <c-CTimeline label="Deployment status" line_style="dashed">
        <c-CTimelineItem state="complete">
          <strong>Build completed</strong><br />Artifacts signed successfully
        </c-CTimelineItem>
        <c-CTimelineItem state="error">
          <strong>Staging failed</strong><br />Health check timed out
        </c-CTimelineItem>
        <c-CTimelineItem state="current">
          <strong>Retry in progress</strong><br />Current attempt is running
        </c-CTimelineItem>
        <c-CTimelineItem state="pending">
          <strong>Production pending</strong><br />Waiting for staging approval
        </c-CTimelineItem>
      </c-CTimeline>
    """


preview = TimelineStatus()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineAlternating(Component):
    template = """
      <c-CTimeline label="Product history" side="alternate">
        <c-CTimelineItem state="complete">
          <strong>Prototype</strong><p>The first field trial validated the core workflow.</p>
        </c-CTimelineItem>
        <c-CTimelineItem state="complete">
          <strong>Private beta</strong><p>Design partners shaped the collaboration model.</p>
        </c-CTimelineItem>
        <c-CTimelineItem state="current">
          <strong>Public beta</strong><p>The current release focuses on reliability and polish.</p>
        </c-CTimelineItem>
        <c-CTimelineItem state="pending">
          <strong>General availability</strong><p>Operational review and migration guidance remain.</p>
        </c-CTimelineItem>
      </c-CTimeline>
    """
    css = ":where(.cui-timeline__content p){margin:.25rem 0 0}"


preview = TimelineAlternating()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineHorizontal(Component):
    template = """
      <c-CTimeline label="2026 roadmap" orientation="horizontal" side="alternate" size="lg">
        <c-CTimelineItem state="complete"><strong>Q1</strong><br />Unified accounts</c-CTimelineItem>
        <c-CTimelineItem state="complete"><strong>Q2</strong><br />Regional storage</c-CTimelineItem>
        <c-CTimelineItem state="current"><strong>Q3</strong><br />Audit workspaces</c-CTimelineItem>
        <c-CTimelineItem state="pending"><strong>Q4</strong><br />Policy automation</c-CTimelineItem>
      </c-CTimeline>
    """


preview = TimelineHorizontal()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimelineCustomization(Component):
    template = """
      <div class="custom-timeline">
        <c-CTimeline label="Team activity"
          c-style="{'--cui-timeline-indicator-size':'2rem','--cui-timeline-track-size':'2.75rem'}">
          <c-CTimelineItem>
            <c-fill name="indicator"><span class="avatar">AK</span></c-fill>
            <c-fill name="default">
              <strong>Ada assigned the issue</strong><br />Ownership moved to Platform.
            </c-fill>
          </c-CTimelineItem>
          <c-CTimelineItem state="current">
            <c-fill name="indicator"><span class="avatar">JM</span></c-fill>
            <c-fill name="default">
              <strong>Jules is investigating</strong><br />Current work is linked in the incident log.
            </c-fill>
          </c-CTimelineItem>
        </c-CTimeline>
      </div>
    """
    css = """
      :where(.custom-timeline) { --cui-timeline-current-color:#7c3aed; }
      :where(.custom-timeline .avatar) {
        display:grid;
        inline-size:100%;
        block-size:100%;
        place-items:center;
        border-radius:50%;
        background:currentcolor;
        color:Canvas;
        font-size:.65rem;
        font-weight:800;
      }
    """


preview = TimelineCustomization()
preview  # noqa: B018