{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/timeline/Timeline.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { TimelineAlign, TimelineDensity, TimelineDirection, TimelineSide } from './context.svelte'\n\n  export interface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n    direction?: TimelineDirection\n    align?: TimelineAlign\n    side?: TimelineSide\n    density?: TimelineDensity\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { TimelineContextState, setTimelineContext } from './context.svelte'\n\n  let {\n    class: className,\n    direction = 'vertical',\n    align = 'start',\n    side,\n    density = 'default',\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: TimelineProps = $props()\n\n  const ctx = new TimelineContextState()\n  setTimelineContext(ctx)\n\n  $effect(() => {\n    ctx.direction = direction\n    ctx.align = align\n    ctx.side = side ?? (direction === 'horizontal' ? 'top' : 'left')\n    ctx.density = density\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline\"\n  data-direction={direction}\n  data-align={align}\n  class={cn('relative', direction === 'vertical' ? 'flex flex-col' : 'flex flex-row', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/Timeline.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { TimelineSide, TimelineStatus } from './context.svelte'\n\n  export interface TimelineItemRenderArgs {\n    index: number\n    isLast: boolean\n    side: TimelineSide\n    status: TimelineStatus\n  }\n\n  export interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {\n    side?: TimelineSide\n    status?: TimelineStatus\n    // Optional param keeps this assignable to the base `Snippet<[]>` while\n    // still letting children read the render args.\n    children?: Snippet<[TimelineItemRenderArgs?]>\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { TimelineItemContextState, getTimelineContext, setTimelineItemContext } from './context.svelte'\n\n  let {\n    class: className,\n    side,\n    status = 'default',\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: TimelineItemProps = $props()\n\n  const ctx = getTimelineContext()\n  const id = Symbol('TimelineItem')\n\n  $effect(() => {\n    ctx?.register(id)\n    return () => ctx?.unregister(id)\n  })\n\n  const index = $derived(ctx ? ctx.itemIds.indexOf(id) : 0)\n  const isFirst = $derived(index === 0)\n  const isLast = $derived(ctx ? index === ctx.itemIds.length - 1 : false)\n\n  const effectiveSide: TimelineSide = $derived.by(() => {\n    if (side) return side\n    if (!ctx) return 'left'\n    if (ctx.align === 'center') {\n      if (ctx.direction === 'vertical') {\n        return index % 2 === 0 ? 'left' : 'right'\n      }\n      return index % 2 === 0 ? 'top' : 'bottom'\n    }\n    return ctx.side\n  })\n\n  const direction = $derived(ctx?.direction ?? 'vertical')\n  const density = $derived(ctx?.density ?? 'default')\n  const isCenter = $derived(ctx?.align === 'center')\n\n  const verticalSpacing = $derived.by(() => {\n    if (isLast) return ''\n    return {\n      compact: '[&>[data-slot=timeline-content]]:pb-3',\n      default: '[&>[data-slot=timeline-content]]:pb-6',\n      comfortable: '[&>[data-slot=timeline-content]]:pb-10',\n    }[density]\n  })\n\n  const horizontalSpacing = $derived.by(() => {\n    if (isLast) return ''\n    return {\n      compact: '[&>[data-slot=timeline-content]]:pr-3',\n      default: '[&>[data-slot=timeline-content]]:pr-6',\n      comfortable: '[&>[data-slot=timeline-content]]:pr-10',\n    }[density]\n  })\n\n  const itemCtx = new TimelineItemContextState()\n  setTimelineItemContext(itemCtx)\n\n  $effect(() => {\n    itemCtx.index = index\n    itemCtx.isFirst = isFirst\n    itemCtx.isLast = isLast\n    itemCtx.side = effectiveSide\n    itemCtx.status = status\n    itemCtx.direction = direction\n    itemCtx.density = density\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline-item\"\n  data-side={effectiveSide}\n  data-status={status}\n  data-last={isLast || undefined}\n  style:--timeline-stagger={`${Math.min(index, 12) * 55}ms`}\n  class={cn(\n    'timeline-item-enter relative',\n    status === 'current' && 'timeline-item-current',\n    !isCenter &&\n      direction === 'vertical' && [\n        'flex items-start gap-4',\n        effectiveSide === 'right' && 'flex-row-reverse text-right',\n        verticalSpacing,\n      ],\n    !isCenter &&\n      direction === 'horizontal' && [\n        'flex flex-col items-start gap-2',\n        effectiveSide === 'bottom' && 'flex-col-reverse',\n        horizontalSpacing,\n      ],\n    isCenter &&\n      direction === 'vertical' && [\n        'grid grid-cols-[1fr_auto_1fr] items-start gap-x-4',\n        '[&>[data-slot=timeline-media]]:col-start-2 [&>[data-slot=timeline-media]]:row-start-1',\n        '[&>[data-slot=timeline-separator]]:col-start-2 [&>[data-slot=timeline-separator]]:row-start-1',\n        '[&>[data-slot=timeline-content]]:row-start-1',\n        effectiveSide === 'left' &&\n          '[&>[data-slot=timeline-content]]:col-start-1 [&>[data-slot=timeline-content]]:text-right',\n        effectiveSide === 'right' && '[&>[data-slot=timeline-content]]:col-start-3',\n        verticalSpacing,\n      ],\n    isCenter &&\n      direction === 'horizontal' && [\n        'grid grid-rows-[1fr_auto_1fr] items-start gap-y-2',\n        '[&>[data-slot=timeline-media]]:col-start-1 [&>[data-slot=timeline-media]]:row-start-2',\n        '[&>[data-slot=timeline-separator]]:col-start-1 [&>[data-slot=timeline-separator]]:row-start-2',\n        '[&>[data-slot=timeline-content]]:col-start-1',\n        effectiveSide === 'top' &&\n          '[&>[data-slot=timeline-content]]:row-start-1 [&>[data-slot=timeline-content]]:self-end',\n        effectiveSide === 'bottom' && '[&>[data-slot=timeline-content]]:row-start-3',\n        horizontalSpacing,\n      ],\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.({ index, isLast, side: effectiveSide, status })}\n</div>\n\n<style>\n  @keyframes timeline-item-enter {\n    from {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes timeline-current-pulse {\n    0%,\n    100% {\n      box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 45%, transparent);\n    }\n    50% {\n      box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 0%, transparent);\n    }\n  }\n\n  .timeline-item-enter {\n    animation: timeline-item-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    animation-delay: var(--timeline-stagger, 0ms);\n  }\n\n  /* Markers live in child components, so the descendant half must be global. */\n  .timeline-item-current :global([data-slot='timeline-media-marker']),\n  .timeline-item-current :global([data-slot='timeline-separator-marker']) {\n    animation: timeline-current-pulse 1.8s ease-in-out infinite;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .timeline-item-enter,\n    .timeline-item-current :global([data-slot='timeline-media-marker']),\n    .timeline-item-current :global([data-slot='timeline-separator-marker']) {\n      animation: none !important;\n    }\n  }\n</style>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineMedia.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { TimelineStatus } from './context.svelte'\n  import type { TimelineMediaVariant } from './timeline.variants'\n\n  export interface TimelineMediaProps extends HTMLAttributes<HTMLDivElement> {\n    variant?: TimelineMediaVariant\n    status?: TimelineStatus\n    /** Manually hide the connector line. */\n    hideConnector?: boolean\n    /**\n     * Color the connector line using the item's status\n     * (success → green, error → red, etc.) instead of the neutral border.\n     */\n    coloredConnector?: boolean\n    /** Line style for the connector. */\n    lineStyle?: 'solid' | 'dashed' | 'dotted'\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { getTimelineItemContext } from './context.svelte'\n  import { timelineMediaVariants } from './timeline.variants'\n\n  let {\n    class: className,\n    variant = 'dot',\n    status,\n    hideConnector = false,\n    coloredConnector = false,\n    lineStyle = 'solid',\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: TimelineMediaProps = $props()\n\n  const item = getTimelineItemContext()\n\n  const direction = $derived(item?.direction ?? 'vertical')\n  const isLast = $derived(item?.isLast ?? true)\n  const effectiveStatus: TimelineStatus = $derived(status ?? item?.status ?? 'default')\n  const showConnector = $derived(!hideConnector && !isLast)\n\n  const connectorBgClass = $derived.by(() => {\n    if (lineStyle === 'dashed') {\n      return direction === 'vertical'\n        ? 'border-l-2 border-dashed border-border bg-transparent w-0'\n        : 'border-t-2 border-dashed border-border bg-transparent h-0'\n    }\n    if (lineStyle === 'dotted') {\n      return direction === 'vertical'\n        ? 'border-l-2 border-dotted border-border bg-transparent w-0'\n        : 'border-t-2 border-dotted border-border bg-transparent h-0'\n    }\n    if (!coloredConnector) return 'bg-border'\n    return {\n      default: 'bg-primary',\n      current: 'bg-primary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      error: 'bg-destructive',\n      info: 'bg-info',\n      muted: 'bg-muted-foreground/40',\n    }[effectiveStatus]\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline-media\"\n  data-variant={variant}\n  class={cn(\n    'relative flex shrink-0 items-center',\n    direction === 'vertical' ? 'flex-col self-stretch' : 'flex-row items-center self-stretch',\n    className,\n  )}\n  {...restProps}\n>\n  <!-- Marker -->\n  <div\n    data-uipkge=\"\"\n    data-slot=\"timeline-media-marker\"\n    class={cn(\n      timelineMediaVariants({ variant, status: effectiveStatus }),\n      direction === 'vertical' && variant === 'dot' && 'mt-1',\n    )}\n  >\n    {@render children?.()}\n  </div>\n\n  <!-- Connector line -->\n  {#if showConnector}\n    <div\n      data-uipkge=\"\"\n      data-slot=\"timeline-media-connector\"\n      aria-hidden=\"true\"\n      class={cn(direction === 'vertical' ? 'my-1 w-px flex-1' : 'mx-1 h-px flex-1', connectorBgClass)}\n    ></div>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineMedia.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineSeparator.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n    hideConnector?: boolean\n    /** Custom marker dot — the Svelte counterpart of the Vue `dot` slot. */\n    dot?: Snippet\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { getTimelineItemContext } from './context.svelte'\n\n  let {\n    class: className,\n    hideConnector = false,\n    dot,\n    ref = $bindable(null),\n    ...restProps\n  }: TimelineSeparatorProps = $props()\n\n  const item = getTimelineItemContext()\n  const direction = $derived(item?.direction ?? 'vertical')\n  const isLast = $derived(item?.isLast ?? true)\n  const showConnector = $derived(!hideConnector && !isLast)\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline-separator\"\n  class={cn(\n    'relative flex shrink-0 items-center',\n    direction === 'vertical' ? 'w-4 flex-col self-stretch' : 'h-4 flex-row items-center self-stretch',\n    className,\n  )}\n  {...restProps}\n>\n  <div\n    data-slot=\"timeline-separator-marker\"\n    class=\"bg-primary ring-background relative z-10 flex size-4 items-center justify-center rounded-full shadow-2xs ring-4\"\n  >\n    {#if dot}\n      {@render dot()}\n    {:else}\n      <div class=\"bg-primary-foreground size-1.5 rounded-full\"></div>\n    {/if}\n  </div>\n\n  {#if showConnector}\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"timeline-media-connector\"\n      class={cn('bg-border', direction === 'vertical' ? 'my-1.5 w-0.5 flex-1' : 'mx-1.5 h-0.5 flex-1')}\n    ></div>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineSeparator.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineContentProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TimelineContentProps = $props()\n</script>\n\n<div bind:this={ref} data-uipkge=\"\" data-slot=\"timeline-content\" class={cn('flex-1 space-y-1', className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineHeaderProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TimelineHeaderProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline-header\"\n  class={cn('flex flex-wrap items-center justify-between gap-2', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineTitle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineTitleProps extends HTMLAttributes<HTMLElement> {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { as: tag = 'h3', class: className, children, ref = $bindable(null), ...restProps }: TimelineTitleProps =\n    $props()\n\n  function setRef(node: HTMLElement) {\n    ref = node\n  }\n</script>\n\n<svelte:element\n  this={tag}\n  use:setRef\n  data-uipkge=\"\"\n  data-slot=\"timeline-title\"\n  class={cn('text-sm leading-none font-semibold tracking-tight', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</svelte:element>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineTitle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineDescription.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n    ref?: HTMLParagraphElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TimelineDescriptionProps = $props()\n</script>\n\n<p\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"timeline-description\"\n  class={cn('text-muted-foreground text-sm', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</p>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineDescription.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/TimelineDate.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TimelineDateProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TimelineDateProps = $props()\n\n  function setRef(node: HTMLElement) {\n    ref = node\n  }\n</script>\n\n<time\n  use:setRef\n  data-uipkge=\"\"\n  data-slot=\"timeline-date\"\n  class={cn('text-muted-foreground text-xs', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</time>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/TimelineDate.svelte"
    },
    {
      "path": "packages/registry-svelte/components/timeline/context.svelte.ts",
      "content": "import { getContext, setContext } from 'svelte'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineAlign = 'start' | 'center'\nexport type TimelineSide = 'left' | 'right' | 'top' | 'bottom'\nexport type TimelineStatus = 'default' | 'current' | 'success' | 'warning' | 'error' | 'info' | 'muted'\nexport type TimelineDensity = 'compact' | 'default' | 'comfortable'\n\nexport class TimelineContextState {\n  direction = $state<TimelineDirection>('vertical')\n  align = $state<TimelineAlign>('start')\n  side = $state<TimelineSide>('left')\n  density = $state<TimelineDensity>('default')\n  itemIds = $state<symbol[]>([])\n\n  register(id: symbol) {\n    if (!this.itemIds.includes(id)) this.itemIds.push(id)\n  }\n\n  unregister(id: symbol) {\n    this.itemIds = this.itemIds.filter((i) => i !== id)\n  }\n}\n\nconst TIMELINE_KEY = Symbol('TimelineContext')\n\nexport function setTimelineContext(ctx: TimelineContextState) {\n  setContext(TIMELINE_KEY, ctx)\n}\n\nexport function getTimelineContext(): TimelineContextState | undefined {\n  return getContext<TimelineContextState | undefined>(TIMELINE_KEY)\n}\n\nexport class TimelineItemContextState {\n  index = $state(0)\n  isFirst = $state(true)\n  isLast = $state(false)\n  side = $state<TimelineSide>('left')\n  status = $state<TimelineStatus>('default')\n  direction = $state<TimelineDirection>('vertical')\n  density = $state<TimelineDensity>('default')\n}\n\nconst TIMELINE_ITEM_KEY = Symbol('TimelineItemContext')\n\nexport function setTimelineItemContext(ctx: TimelineItemContextState) {\n  setContext(TIMELINE_ITEM_KEY, ctx)\n}\n\nexport function getTimelineItemContext(): TimelineItemContextState | undefined {\n  return getContext<TimelineItemContextState | undefined>(TIMELINE_ITEM_KEY)\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/context.svelte.ts"
    },
    {
      "path": "packages/registry-svelte/components/timeline/timeline.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const timelineMediaVariants = cva(\n  'relative z-10 flex shrink-0 items-center justify-center rounded-full ring-4 ring-background transition-colors [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        dot: 'size-2.5',\n        icon: 'size-8 border border-border bg-card text-muted-foreground shadow-2xs [&>svg]:size-4',\n        avatar:\n          'size-8 ring-2 ring-border bg-muted overflow-hidden [&>img]:size-full [&>img]:object-cover [&>[data-slot=avatar]]:size-full',\n        outline: 'size-8 border border-border bg-background text-foreground [&>svg]:size-4',\n      },\n      status: {\n        default: '',\n        current: '',\n        success: '',\n        warning: '',\n        error: '',\n        info: '',\n        muted: '',\n      },\n    },\n    compoundVariants: [\n      // DOT\n      {\n        variant: 'dot',\n        status: 'default',\n        class: 'bg-primary text-primary-foreground',\n      },\n      {\n        variant: 'dot',\n        status: 'current',\n        class: 'bg-primary text-primary-foreground ring-4 ring-primary/25',\n      },\n      {\n        variant: 'dot',\n        status: 'success',\n        class: 'bg-success text-success-foreground',\n      },\n      {\n        variant: 'dot',\n        status: 'warning',\n        class: 'bg-warning text-warning-foreground',\n      },\n      {\n        variant: 'dot',\n        status: 'error',\n        class: 'bg-destructive text-destructive-foreground',\n      },\n      {\n        variant: 'dot',\n        status: 'info',\n        class: 'bg-info text-info-foreground',\n      },\n      {\n        variant: 'dot',\n        status: 'muted',\n        class: 'bg-muted-foreground/30 text-muted-foreground',\n      },\n\n      // ICON\n      {\n        variant: 'icon',\n        status: 'default',\n        class: 'border-border bg-card text-muted-foreground',\n      },\n      {\n        variant: 'icon',\n        status: 'current',\n        class: 'border-primary/50 bg-primary/10 text-primary ring-4 ring-primary/15',\n      },\n      {\n        variant: 'icon',\n        status: 'success',\n        class: 'border-success/40 bg-success/10 text-success ring-4 ring-success/10',\n      },\n      {\n        variant: 'icon',\n        status: 'warning',\n        class: 'border-warning/40 bg-warning/10 text-warning ring-4 ring-warning/10',\n      },\n      {\n        variant: 'icon',\n        status: 'error',\n        class: 'border-destructive/40 bg-destructive/10 text-destructive ring-4 ring-destructive/10',\n      },\n      {\n        variant: 'icon',\n        status: 'info',\n        class: 'border-info/40 bg-info/10 text-info ring-4 ring-info/10',\n      },\n      {\n        variant: 'icon',\n        status: 'muted',\n        class: 'border-border/60 bg-muted/40 text-muted-foreground/60',\n      },\n\n      // OUTLINE\n      {\n        variant: 'outline',\n        status: 'default',\n        class: 'border-border text-foreground bg-background',\n      },\n      {\n        variant: 'outline',\n        status: 'current',\n        class: 'border-primary text-primary bg-background ring-4 ring-primary/25',\n      },\n      {\n        variant: 'outline',\n        status: 'success',\n        class: 'border-success text-success bg-background',\n      },\n      {\n        variant: 'outline',\n        status: 'warning',\n        class: 'border-warning text-warning bg-background',\n      },\n      {\n        variant: 'outline',\n        status: 'error',\n        class: 'border-destructive text-destructive bg-background',\n      },\n      {\n        variant: 'outline',\n        status: 'info',\n        class: 'border-info text-info bg-background',\n      },\n      {\n        variant: 'outline',\n        status: 'muted',\n        class: 'border-border text-muted-foreground bg-background',\n      },\n    ],\n    defaultVariants: {\n      variant: 'dot',\n      status: 'default',\n    },\n  },\n)\n\nexport type TimelineMediaVariantsProps = VariantProps<typeof timelineMediaVariants>\nexport type TimelineMediaVariant = 'dot' | 'icon' | 'avatar' | 'outline'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/timeline.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/timeline/index.ts",
      "content": "export { default as Timeline, type TimelineProps } from './Timeline.svelte'\nexport { default as TimelineItem, type TimelineItemProps, type TimelineItemRenderArgs } from './TimelineItem.svelte'\nexport { default as TimelineMedia, type TimelineMediaProps } from './TimelineMedia.svelte'\nexport { default as TimelineSeparator, type TimelineSeparatorProps } from './TimelineSeparator.svelte'\nexport { default as TimelineContent, type TimelineContentProps } from './TimelineContent.svelte'\nexport { default as TimelineHeader, type TimelineHeaderProps } from './TimelineHeader.svelte'\nexport { default as TimelineTitle, type TimelineTitleProps } from './TimelineTitle.svelte'\nexport { default as TimelineDescription, type TimelineDescriptionProps } from './TimelineDescription.svelte'\nexport { default as TimelineDate, type TimelineDateProps } from './TimelineDate.svelte'\n\nexport type {\n  TimelineDirection,\n  TimelineAlign,\n  TimelineSide,\n  TimelineStatus,\n  TimelineDensity,\n} from './context.svelte'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component <-> index.ts circular import that broke dev SSR for Card).\nexport {\n  timelineMediaVariants,\n  type TimelineMediaVariantsProps,\n  type TimelineMediaVariant,\n} from './timeline.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/timeline/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Vertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.",
  "categories": [
    "data-display"
  ]
}