seblify 0.2.0 → 0.3.0

package/dist/components/display/data-display/visual/timeline/Timeline.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import {
+    setTimelineContext,
+    type TimelineAlign,
+    type TimelineItemSide,
+    type TimelineItemTone,
+    type TimelineOrientation,
+  } from './context';
+
+  type TimelineGap =
+    | 'none'
+    | 'xxs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | 'xxl'
+    | CustomCssSize;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    align?: TimelineAlign;
+    contentSide?: TimelineItemSide;
+    gap?: TimelineGap;
+    labelSide?: TimelineItemSide;
+    orientation?: TimelineOrientation;
+    tone?: TimelineItemTone;
+  }>;
+
+  let {
+    children,
+    class: className,
+    align = 'start',
+    contentSide = 'end',
+    gap = 'lg',
+    labelSide = 'start',
+    orientation = 'vertical',
+    tone = 'primary',
+    ...restProps
+  }: Props = $props();
+
+  function cssLength(value: TimelineGap | number | string): string {
+    if (value === 'none') {
+      return '0';
+    }
+
+    if (value === 'xxs') {
+      return '0.25rem';
+    }
+
+    if (value === 'xs') {
+      return '0.5rem';
+    }
+
+    if (value === 'sm') {
+      return '0.75rem';
+    }
+
+    if (value === 'md') {
+      return '1rem';
+    }
+
+    if (value === 'lg') {
+      return '1.5rem';
+    }
+
+    if (value === 'xl') {
+      return '2rem';
+    }
+
+    if (value === 'xxl') {
+      return '3rem';
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  const timelineContext = $state({
+    align: 'start' as TimelineAlign,
+    contentSide: 'end' as TimelineItemSide,
+    labelSide: 'start' as TimelineItemSide,
+    orientation: 'vertical' as TimelineOrientation,
+    tone: 'primary' as TimelineItemTone,
+  });
+
+  $effect(() => {
+    timelineContext.align = align;
+    timelineContext.contentSide = contentSide;
+    timelineContext.labelSide = labelSide;
+    timelineContext.orientation = orientation;
+    timelineContext.tone = tone;
+  });
+
+  const gapValue = $derived(cssLength(gap));
+
+  setTimelineContext(timelineContext);
+</script>
+
+<div
+  {...restProps}
+  class={`timeline${className ? ` ${className}` : ''}`}
+  data-timeline-align={align}
+  data-timeline-orientation={orientation}
+  style:--timeline-gap={gapValue}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .timeline {
+    --timeline-axis-min-size: 2.5rem;
+    --timeline-axis-gap: 0.5rem;
+
+    display: grid;
+    row-gap: var(--timeline-gap, 1.5rem);
+    column-gap: var(--timeline-axis-gap);
+    min-width: 0;
+  }
+
+  .timeline[data-timeline-orientation='vertical'] {
+    grid-template-columns:
+      max-content minmax(var(--timeline-axis-min-size), max-content)
+      minmax(0, 1fr);
+  }
+
+  .timeline[data-timeline-orientation='horizontal'] {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(12rem, 1fr);
+    grid-template-rows:
+      max-content minmax(var(--timeline-axis-min-size), max-content)
+      auto;
+    align-items: stretch;
+    row-gap: var(--timeline-axis-gap);
+    column-gap: var(--timeline-gap, 1.5rem);
+    padding-block: 0.25rem;
+  }
+
+  @media (max-width: 760px) {
+    .timeline {
+      --timeline-axis-min-size: 2rem;
+    }
+  }
+
+  .timeline :global(.timeline-item) {
+    --timeline-line-before-opacity: 1;
+    --timeline-line-after-opacity: 1;
+  }
+
+  .timeline :global(.timeline-item:first-child) {
+    --timeline-line-before-opacity: 0;
+  }
+
+  .timeline :global(.timeline-item:last-child) {
+    --timeline-line-after-opacity: 0;
+  }
+</style>

package/dist/components/display/data-display/visual/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+import { type TimelineAlign, type TimelineItemSide, type TimelineItemTone, type TimelineOrientation } from './context';
+type TimelineGap = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | CustomCssSize;
+declare const Timeline: import("svelte").Component<{
+    [x: string]: unknown;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    align?: TimelineAlign | undefined;
+    contentSide?: TimelineItemSide | undefined;
+    gap?: TimelineGap | undefined;
+    labelSide?: TimelineItemSide | undefined;
+    orientation?: TimelineOrientation | undefined;
+    tone?: TimelineItemTone | undefined;
+}, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/display/data-display/visual/timeline/TimelineItem.svelte

@@ -0,0 +1,489 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import {
+    getTimelineContext,
+    type TimelineItemSide,
+    type TimelineItemTone,
+  } from './context';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    children?: Snippet;
+    class?: string;
+    contentSide?: TimelineItemSide;
+    label?: string;
+    labelSide?: TimelineItemSide;
+    marker?: Snippet;
+    text?: string;
+    tone?: TimelineItemTone;
+  }>;
+
+  let {
+    children,
+    class: className,
+    contentSide,
+    label,
+    labelSide,
+    marker,
+    text,
+    tone,
+    ...restProps
+  }: Props = $props();
+
+  const timeline = getTimelineContext();
+  const resolvedContentSide = $derived(contentSide ?? timeline.contentSide);
+  const resolvedLabelSide = $derived(labelSide ?? timeline.labelSide);
+  const resolvedTone = $derived(tone ?? timeline.tone);
+  const hasCustomContent = $derived(Boolean(children));
+
+  let markerContentElement = $state<HTMLSpanElement | undefined>(undefined);
+  let markerContentInlineSize = $state(0);
+  let markerContentBlockSize = $state(0);
+
+  $effect(() => {
+    if (!markerContentElement) {
+      markerContentInlineSize = 0;
+      markerContentBlockSize = 0;
+      return;
+    }
+
+    const updateMarkerContentSize = () => {
+      markerContentInlineSize = markerContentElement?.offsetWidth ?? 0;
+      markerContentBlockSize = markerContentElement?.offsetHeight ?? 0;
+    };
+
+    updateMarkerContentSize();
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateMarkerContentSize();
+    });
+
+    resizeObserver.observe(markerContentElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  let labelSharesSide = $derived(resolvedContentSide === resolvedLabelSide);
+</script>
+
+<article
+  {...restProps}
+  class={`timeline-item${className ? ` ${className}` : ''}`}
+  data-content-side={resolvedContentSide}
+  data-label-side={resolvedLabelSide}
+  data-orientation={timeline.orientation}
+>
+  <div class="timeline-item__side timeline-item__side--start">
+    {#if resolvedContentSide === 'start'}
+      <div class="timeline-item__content">
+        {#if hasCustomContent}
+          {@render children?.()}
+        {:else if text}
+          {text}
+        {/if}
+      </div>
+    {/if}
+
+    {#if label && resolvedLabelSide === 'start'}
+      <div class="timeline-item__label" data-stacked={labelSharesSide}>
+        {label}
+      </div>
+    {/if}
+  </div>
+
+  <div
+    class="timeline-item__axis seblify-tone-context"
+    data-seblify-tone={resolvedTone}
+    style:--timeline-marker-content-block-size={`${markerContentBlockSize}px`}
+    style:--timeline-marker-content-inline-size={`${markerContentInlineSize}px`}
+  >
+    <span class="timeline-item__line timeline-item__line--before"></span>
+    <span class="timeline-item__marker">
+      {#if marker}
+        <span
+          bind:this={markerContentElement}
+          class="timeline-item__marker-content seblify-tone-publisher"
+        >
+          {@render marker()}
+        </span>
+      {:else}
+        <span class="timeline-item__marker-dot"></span>
+      {/if}
+    </span>
+    <span class="timeline-item__line timeline-item__line--after"></span>
+  </div>
+
+  <div class="timeline-item__side timeline-item__side--end">
+    {#if resolvedContentSide === 'end'}
+      <div class="timeline-item__content">
+        {#if hasCustomContent}
+          {@render children?.()}
+        {:else if text}
+          {text}
+        {/if}
+      </div>
+    {/if}
+
+    {#if label && resolvedLabelSide === 'end'}
+      <div class="timeline-item__label" data-stacked={labelSharesSide}>
+        {label}
+      </div>
+    {/if}
+  </div>
+</article>
+
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.timeline-item {
+    --timeline-line: var(--seblify-color-border, #c8d2df);
+    --timeline-line-before-opacity: 1;
+    --timeline-line-after-opacity: 1;
+    --timeline-item-label: var(--seblify-color-text-muted, #516176);
+    --timeline-item-axis-size: var(--timeline-axis-min-size, 2.5rem);
+    --timeline-gap-size: var(--timeline-gap, 1.5rem);
+    --timeline-marker-gap: 1.25rem;
+    --timeline-marker-size: 1.25rem;
+    --timeline-side-align-block: start;
+    --timeline-side-align-inline: start;
+    --timeline-side-text-align-inline: left;
+
+    display: grid;
+    min-width: 0;
+    color: var(--seblify-color-text, #172033);
+  }
+
+.timeline-item__side {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+.timeline-item__content,
+  .timeline-item__label {
+    min-width: 0;
+  }
+
+.timeline-item__label {
+    color: var(--timeline-item-label);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+
+.timeline-item__label[data-stacked='true'] {
+    margin-top: -0.125rem;
+  }
+
+.timeline-item__axis {
+    position: relative;
+    display: grid;
+    min-width: max(
+      var(--timeline-item-axis-size),
+      var(--timeline-marker-content-inline-size, 0px)
+    );
+    min-height: max(
+      var(--timeline-item-axis-size),
+      var(--timeline-marker-content-block-size, 0px)
+    );
+  }
+
+.timeline-item__line {
+    position: absolute;
+    background: var(--timeline-line);
+  }
+
+.timeline-item__marker {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    min-width: var(--timeline-marker-size);
+    min-height: var(--timeline-marker-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--seblify-tone-fill-text);
+  }
+
+:global([data-timeline-align='start']) .timeline-item {
+    --timeline-marker-center-block: calc(var(--timeline-marker-size) * 0.5);
+    --timeline-marker-center-inline: calc(var(--timeline-marker-size) * 0.5);
+    --timeline-side-align-block: start;
+    --timeline-side-align-inline: start;
+    --timeline-side-text-align-inline: left;
+  }
+
+:global([data-timeline-align='center']) .timeline-item {
+    --timeline-marker-center-block: 50%;
+    --timeline-marker-center-inline: 50%;
+    --timeline-side-align-block: center;
+    --timeline-side-align-inline: center;
+    --timeline-side-text-align-inline: center;
+  }
+
+:global([data-timeline-align='end']) .timeline-item {
+    --timeline-marker-center-block: calc(
+      100% - (var(--timeline-marker-size) * 0.5)
+    );
+    --timeline-marker-center-inline: calc(
+      100% - (var(--timeline-marker-size) * 0.5)
+    );
+    --timeline-side-align-block: end;
+    --timeline-side-align-inline: end;
+    --timeline-side-text-align-inline: right;
+  }
+
+.timeline-item__marker-content {
+    --seblify-current-tone-fill: var(--seblify-tone-fill);
+    --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+    --seblify-current-tone-text: var(--seblify-tone-text);
+    --seblify-current-tone-surface: var(--seblify-tone-surface);
+    --seblify-current-tone-border: var(--seblify-tone-border);
+    --seblify-current-size: var(--timeline-marker-size);
+
+    display: inline-flex;
+    min-width: var(--timeline-marker-size);
+    min-height: var(--timeline-marker-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--seblify-tone-fill);
+    line-height: 0;
+  }
+
+.timeline-item__marker-dot {
+    width: 0.875rem;
+    height: 0.875rem;
+    border: 2px solid var(--seblify-color-surface, #ffffff);
+    border-radius: 999px;
+    background: var(--seblify-tone-fill);
+    box-shadow: 0 0 0 1px
+      color-mix(in srgb, var(--seblify-tone-fill) 20%, transparent);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: start;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side--start {
+    grid-column: 1;
+    text-align: right;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side--end {
+    grid-column: 3;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__side {
+    align-self: stretch;
+    justify-content: var(--timeline-side-align-block);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__axis {
+    grid-column: 2;
+    align-self: stretch;
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__marker {
+    inset-inline-start: 50%;
+    top: var(--timeline-marker-center-block);
+    transform: translate(-50%, -50%);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line {
+    width: 2px;
+    inset-inline-start: calc(50% - 1px);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line--before {
+    top: calc(var(--timeline-gap-size) * -0.5);
+    bottom: calc(
+      100% - var(--timeline-marker-center-block) + var(--timeline-marker-gap)
+    );
+    opacity: var(--timeline-line-before-opacity);
+  }
+
+:global([data-timeline-orientation='vertical']) .timeline-item__line--after {
+    top: calc(
+      var(--timeline-marker-center-block) + var(--timeline-marker-gap)
+    );
+    bottom: calc(var(--timeline-gap-size) * -0.5);
+    opacity: var(--timeline-line-after-opacity);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item {
+    grid-row: 1 / -1;
+    grid-template-rows: subgrid;
+    min-width: 12rem;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__side {
+    justify-self: stretch;
+    justify-items: var(--timeline-side-align-inline);
+    text-align: var(--timeline-side-text-align-inline);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__side--start {
+    grid-row: 1;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__axis {
+    grid-row: 2;
+    min-height: var(--timeline-item-axis-size);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__marker {
+    inset-block-start: 50%;
+    left: var(--timeline-marker-center-inline);
+    transform: translate(-50%, -50%);
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__side--end {
+    grid-row: 3;
+  }
+
+:global([data-timeline-orientation='horizontal']) .timeline-item__line {
+    height: 2px;
+    inset-block-start: calc(50% - 1px);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__line--before {
+    inset-inline: calc(var(--timeline-gap-size) * -0.5)
+      calc(
+        100% - var(--timeline-marker-center-inline) +
+          var(--timeline-marker-gap)
+      );
+    opacity: var(--timeline-line-before-opacity);
+  }
+
+:global([data-timeline-orientation='horizontal'])
+    .timeline-item__line--after {
+    inset-inline: calc(
+        var(--timeline-marker-center-inline) + var(--timeline-marker-gap)
+      )
+      calc(var(--timeline-gap-size) * -0.5);
+    opacity: var(--timeline-line-after-opacity);
+  }
+
+@media (max-width: 760px) {
+    :global([data-timeline-orientation='horizontal']) .timeline-item {
+      min-width: 10rem;
+    }
+  }
+</style>

package/dist/components/display/data-display/visual/timeline/TimelineItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type TimelineItemSide, type TimelineItemTone } from './context';
+declare const TimelineItem: import("svelte").Component<{
+    [x: string]: unknown;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    contentSide?: TimelineItemSide | undefined;
+    label?: string | undefined;
+    labelSide?: TimelineItemSide | undefined;
+    marker?: Snippet | undefined;
+    text?: string | undefined;
+    tone?: TimelineItemTone | undefined;
+}, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

package/dist/components/display/data-display/visual/timeline/context.d.ts

@@ -0,0 +1,14 @@
+export type TimelineOrientation = 'vertical' | 'horizontal';
+export type TimelineAlign = 'start' | 'center' | 'end';
+export type TimelineItemSide = 'start' | 'end';
+export type TimelineItemTone = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+interface TimelineContextValue {
+    align: TimelineAlign;
+    contentSide: TimelineItemSide;
+    labelSide: TimelineItemSide;
+    orientation: TimelineOrientation;
+    tone: TimelineItemTone;
+}
+export declare function setTimelineContext(value: TimelineContextValue): void;
+export declare function getTimelineContext(): TimelineContextValue;
+export {};