2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T3063,"use client"; import * as React from "react"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cva, type VariantProps } from "class-variance-authority"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export type TimelineOrientation = "vertical" | "horizontal"; export type TimelinePlacement = "start" | "end" | "alternate"; export type TimelineSize = "sm" | "default" | "lg"; export type TimelineDensity = "compact" | "default" | "relaxed"; export type TimelineTone = "default" | "primary" | "success" | "warning" | "error" | "info"; type TimelineContextValue = { orientation: TimelineOrientation; placement: TimelinePlacement; }; const TimelineContext = React.createContext({ orientation: "vertical", placement: "end" }); /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export type TimelineProps = React.ComponentProps<"ol"> & { /** Axis the line runs along. */ orientation?: TimelineOrientation; /** Which side of the line the content sits on. `alternate` flips every item. */ placement?: TimelinePlacement; size?: TimelineSize; /** Space between items. */ density?: TimelineDensity; }; function Timeline({ className, orientation = "vertical", placement = "end", size = "default", density = "default", ...props }: TimelineProps) { const value = React.useMemo(() => ({ orientation, placement }), [orientation, placement]); return (

); } const indicatorVariants = cva( "relative z-10 flex shrink-0 items-center justify-center rounded-full border bg-background transition-colors duration-150 ease-out motion-reduce:transition-none group-data-[size=sm]/timeline:size-5 group-data-[size=default]/timeline:size-6 group-data-[size=lg]/timeline:size-8 [&>svg]:size-3.5 group-data-[size=sm]/timeline:[&>svg]:size-3 group-data-[size=lg]/timeline:[&>svg]:size-4 [&>[data-slot=avatar]]:size-full", { variants: { tone: { default: "border-border text-muted-foreground", primary: "border-primary bg-primary text-primary-foreground", success: "border-success/35 bg-success/10 text-success", warning: "border-warning/35 bg-warning/10 text-warning", error: "border-error/35 bg-error/10 text-error", info: "border-info/35 bg-info/10 text-info", }, }, defaultVariants: { tone: "default" }, }, ); export type TimelineIndicatorProps = React.ComponentProps<"span"> & VariantProps; /** A dot when empty, otherwise holds an icon or an Avatar. */ function TimelineIndicator({ className, tone, children, ...props }: TimelineIndicatorProps) { return ( {children ?? } ); } const connectorTone: Record = { default: "bg-foreground/20", primary: "bg-primary/60", success: "bg-success/40", warning: "bg-warning/40", error: "bg-error/40", info: "bg-info/40", }; export type TimelineConnectorProps = Omit, "orientation"> & { tone?: TimelineTone; /** Dashed for steps that have not happened yet. */ dashed?: boolean; }; function TimelineConnector({ className, tone = "default", dashed, ...props }: TimelineConnectorProps) { const { orientation } = React.useContext(TimelineContext); return ( ); } /* -------------------------------------------------------------------------- */ /* Content parts */ /* -------------------------------------------------------------------------- */ function TimelineContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } /** The other side of the line: dates, version numbers, quarter labels. */ function TimelineOpposite({ className, ...props }: React.ComponentProps<"div">) { return (

); } function TimelineHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function TimelineTitle({ className, ...props }: React.ComponentProps<"div">) { return (

); } function TimelineTime({ className, ...props }: React.ComponentProps<"time">) { return ( ); } function TimelineBody({ className, ...props }: React.ComponentProps<"div">) { return (

); } const badgeVariant = { default: "neutral", primary: "default", success: "green", warning: "amber", error: "destructive", info: "blue", } as const; function TimelineBadge({ tone = "default", size = "sm", ...props }: Omit, "variant"> & { tone?: TimelineTone }) { return ; } /** Designed empty state. Render it as the only child of Timeline. */ function TimelineEmpty({ className, children = "Nothing has happened yet.", ...props }: React.ComponentProps<"li">) { return (

{children}

); } export { Timeline, TimelineEmpty, TimelineItem, TimelineSeparator, TimelineIndicator, TimelineConnector, TimelineContent, TimelineOpposite, TimelineHeader, TimelineTitle, TimelineTime, TimelineBody, TimelineBadge, }; 31:T343d,"use client"; import * as React from "react"; import { DemoGrid, DemoPage, DemoSection } from "../../_shared/variant-frame"; import { IconAlertTriangle, IconBug, IconCheck, IconFlag, IconGitCommit, IconGitMerge, IconGitPullRequest, IconMessage, IconPlayerPlay, IconPlus, IconRocket, IconTag, } from "@tabler/icons-react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { Timeline, TimelineBadge, TimelineBody, TimelineConnector, TimelineContent, TimelineEmpty, TimelineHeader, TimelineIndicator, TimelineItem, TimelineOpposite, TimelineSeparator, TimelineTime, TimelineTitle, type TimelineDensity, type TimelineOrientation, type TimelinePlacement, type TimelineSize, type TimelineTone, } from "./timeline"; import { incidentUpdates, logEvents, milestones, releaseAudit, repoActivity, splitEntries, versionHistory, type IncidentUpdate, type RepoActivity, type TimelineIconKind, } from "../_fixtures-b"; const ICONS: Record = { flag: , rocket: , alert: , check: , message: , tag: , bug: , play: , }; function Options({ label, value, onValueChange, options, }: { label: string; value: T; onValueChange: (v: T) => void; options: readonly T[]; }) { return (

{label} next[0] && onValueChange(next[0] as T)} > {options.map((o) => ( {o} ))}

); } /* ----------------------------- playground ---------------------------------- */ function Playground() { const [orientation, setOrientation] = React.useState("vertical"); const [placement, setPlacement] = React.useState("end"); const [size, setSize] = React.useState("default"); const [density, setDensity] = React.useState("default"); const horizontal = orientation === "horizontal"; const items = horizontal ? releaseAudit.slice(0, 4) : releaseAudit; return (

{items.map((e, i) => ( {e.icon ? ICONS[e.icon] : null} {e.time} {e.title} {e.badge ? {e.badge} : null} {e.body} ))}

); } /* ------------------------------- compact log ------------------------------- */ function CompactLog() { return ( {logEvents.map((e) => ( {e.time} {e.title} ))} ); } /* ----------------------------- version history ----------------------------- */ function VersionHistory() { return ( {versionHistory.map((v) => ( {v.date} {v.version} {v.latest ? Latest : null}

{v.title}

))} ); } /* ----------------------------- incident response --------------------------- */ const incidentTone: Record = { investigating: "error", identified: "warning", monitoring: "info", resolved: "success", }; const incidentLabel: Record = { investigating: "Investigating", identified: "Identified", monitoring: "Monitoring", resolved: "Resolved", }; const nextStatus = ["investigating", "identified", "monitoring", "resolved"] as const; function IncidentResponse() { const [updates, setUpdates] = React.useState<(IncidentUpdate & { fresh?: boolean })[]>(incidentUpdates); const post = () => { const status = nextStatus[Math.min(updates.length % 4, 3)]; const minute = 12 * 60 + 4 + (updates.length - incidentUpdates.length) * 7; const time = `${String(Math.floor(minute / 60)).padStart(2, "0")}:${String(minute % 60).padStart(2, "0")}`; setUpdates((u) => [ { id: `n${u.length}`, status, time, title: "Follow-up posted", body: "Customer reports are being cross-checked against the queue.", fresh: true }, ...u, ]); }; return (

{updates.map((u, i) => ( {incidentLabel[u.status]} {u.time} UTC {u.title} {u.body} ))}

); } /* ---------------------------- repository activity -------------------------- */ const activityIcon: Record = { commit: , "pr-opened": , "pr-merged": , comment: , tag: , issue: , }; function RepositoryActivity() { return ( {repoActivity.map((a) => ( {a.initials} {a.actor} {a.verb} {activityIcon[a.kind]} {a.target} {a.time} {a.detail ? {a.detail} : null} ))} ); } /* ------------------------------ split content ------------------------------ */ function SplitContent() { return ( {splitEntries.map((s) => ( {s.time} {s.title} {s.body} {s.meta} ))} ); } /* --------------------------- centered milestones --------------------------- */ function CenteredMilestones({ horizontal }: { horizontal?: boolean }) { return ( {milestones.map((m) => ( {m.done ? : null} {m.label} {m.title} {m.body} ))} ); } export function TimelineDemo() { return ( ); } export default TimelineDemo; 32:T7e4,import type { BlockMeta } from "../../../lib/block-meta"; export const timelineMeta: BlockMeta = { slug: "timeline", title: "Timeline", description: "Vertical or horizontal timeline with start, end and alternate placement, three sizes and three densities. Indicators hold a dot, an icon or an avatar; items carry time, title, body and badge. Demos: compact log, version history, incident response, repository activity, split content, centered milestones.", group: "data", kobraDeps: ["badge", "separator"], files: ["blocks/data/timeline/timeline.tsx"], props: [ { name: "orientation", type: "'vertical' | 'horizontal'", default: "'vertical'", description: "Axis the line runs along." }, { name: "placement", type: "'start' | 'end' | 'alternate'", default: "'end'", description: "Side of the line the content sits on. Alternate flips every item." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Indicator and text scale." }, { name: "density", type: "'compact' | 'default' | 'relaxed'", default: "'default'", description: "Space between items." }, { name: "TimelineItem current", type: "boolean", description: "Sets aria-current=\"step\"." }, { name: "TimelineItem enter", type: "boolean", description: "Fade and rise in on mount, for items appended after first paint." }, { name: "TimelineItem render", type: "ReactElement", description: "Swap the li for another element." }, { name: "TimelineIndicator tone", type: "'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'", default: "'default'", description: "Status hue. Children become an icon or avatar; empty renders a dot." }, { name: "TimelineConnector dashed", type: "boolean", description: "Dashed rule for steps that have not happened." }, { name: "TimelineOpposite", type: "part", description: "Content on the other side of the line (dates, versions, labels)." }, ], tags: ["timeline", "history", "log", "activity", "data"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Timeline"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Timeline"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Vertical or horizontal timeline with start, end and alternate placement, three sizes and three densities. Indicators hold a dot, an icon or an avatar; items carry time, title, body and badge. Demos: compact log, version history, incident response, repository activity, split content, centered milestones."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"timeline","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/timeline/timeline.tsx","code":"$30"},{"path":"blocks/data/timeline/demo.tsx","code":"$31"},{"path":"blocks/data/timeline/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]