@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/terminal/terminal.js

@@ -20,35 +20,42 @@ function Terminal({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       ) : null
     ] })
@@ -79,35 +86,42 @@ function SimpleTerminal({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       commands.length > 0 && /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       )
     ] })

package/dist/components/thinking-block/thinking-block.js

@@ -30,7 +30,7 @@ function ThinkingBlock({
         onClick: toggleExpanded,
         type: "button",
         children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Thinking",
             isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null

package/dist/components/thread-bubble/index.js

@@ -0,0 +1,6 @@
+import {
+  ThreadBubble
+} from "./thread-bubble";
+export {
+  ThreadBubble
+};

package/dist/components/thread-bubble/thread-bubble.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No replies yet",
+  region: "Comment thread"
+};
+const Message = (props) => {
+  const { message } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold",
+          "data-thread-bubble-author": true,
+          style: message.authorColor ? { color: message.authorColor } : void 0,
+          children: message.author
+        }
+      ),
+      message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
+  ] });
+};
+const ThreadBubble = forwardRef(
+  (props, ref) => {
+    const { className, footer, labels, messages, onResolve, title, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handleResolve = () => {
+      onResolve?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+          className
+        ),
+        "data-thread-bubble": true,
+        ref,
+        ...rest,
+        children: [
+          title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            onResolve ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-thread-bubble-resolve": true,
+                onClick: handleResolve,
+                type: "button",
+                children: "Resolve"
+              }
+            ) : null
+          ] }) : null,
+          messages.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
+              "data-thread-bubble-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
+          footer ? /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: "border-t border-border pt-2",
+              "data-thread-bubble-footer": true,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThreadBubble.displayName = "ThreadBubble";
+export {
+  ThreadBubble
+};

package/dist/components/threshold-ring/index.js

@@ -0,0 +1,6 @@
+import {
+  ThresholdRing
+} from "./threshold-ring";
+export {
+  ThresholdRing
+};

package/dist/components/threshold-ring/threshold-ring.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_STROKE = {
+  danger: "stroke-red-500",
+  neutral: "stroke-foreground",
+  success: "stroke-emerald-500",
+  warn: "stroke-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Threshold ring"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const polar = (input) => {
+  const rad = (input.angle - 90) * (Math.PI / 180);
+  return {
+    x: input.cx + input.r * Math.cos(rad),
+    y: input.cy + input.r * Math.sin(rad)
+  };
+};
+const computeGeometry = (input) => {
+  const safeMax = input.max <= 0 ? 1 : input.max;
+  const ratio = clamp(input.value / safeMax, 0, 1);
+  const cx = input.size / 2;
+  const cy = input.size / 2;
+  const r = (input.size - input.stroke) / 2;
+  const circumference = 2 * Math.PI * r;
+  const tickAngle = input.threshold === void 0 ? null : clamp(input.threshold / safeMax, 0, 1) * 360;
+  return {
+    circumference,
+    cx,
+    cy,
+    r,
+    ratio,
+    size: input.size,
+    stroke: input.stroke,
+    tickAngle
+  };
+};
+const Tick = (props) => {
+  const { geom } = props;
+  if (geom.tickAngle === null) {
+    return null;
+  }
+  const inner = polar({
+    angle: geom.tickAngle,
+    cx: geom.cx,
+    cy: geom.cy,
+    r: geom.r - geom.stroke / 2
+  });
+  const outer = polar({
+    angle: geom.tickAngle,
+    cx: geom.cx,
+    cy: geom.cy,
+    r: geom.r + geom.stroke / 2
+  });
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      className: "stroke-foreground/80",
+      "data-threshold-ring-tick": true,
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      x1: inner.x,
+      x2: outer.x,
+      y1: inner.y,
+      y2: outer.y
+    }
+  );
+};
+const ThresholdRing = forwardRef(
+  (props, ref) => {
+    const {
+      centerLabel,
+      className,
+      labels,
+      max = 1,
+      size = 64,
+      stroke = 6,
+      threshold,
+      tone = "neutral",
+      value,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const geom = computeGeometry({ max, size, stroke, threshold, value });
+    const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-block", className),
+        "data-threshold-ring": true,
+        "data-threshold-tone": tone,
+        height: geom.size,
+        ref,
+        role: "img",
+        viewBox: `0 0 ${geom.size} ${geom.size}`,
+        width: geom.size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "stroke-muted",
+              cx: geom.cx,
+              cy: geom.cy,
+              fill: "none",
+              r: geom.r,
+              strokeWidth: geom.stroke
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("transition-all duration-300", TONE_STROKE[tone]),
+              cx: geom.cx,
+              cy: geom.cy,
+              "data-threshold-ring-arc": true,
+              fill: "none",
+              r: geom.r,
+              strokeDasharray: dash,
+              strokeLinecap: "round",
+              strokeWidth: geom.stroke,
+              transform: `rotate(-90 ${geom.cx} ${geom.cy})`
+            }
+          ),
+          /* @__PURE__ */ jsx(Tick, { geom }),
+          centerLabel ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "fill-foreground text-[10px] font-semibold",
+              "data-threshold-ring-label": true,
+              dominantBaseline: "central",
+              textAnchor: "middle",
+              x: geom.cx,
+              y: geom.cy,
+              children: centerLabel
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThresholdRing.displayName = "ThresholdRing";
+export {
+  ThresholdRing
+};

package/dist/components/ticker-tape/ticker-tape.js

@@ -22,7 +22,7 @@ function formatChange(change) {
   return `${sign}${change.toFixed(2)}%`;
 }
 function TickerTapeRow({ items }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-center gap-3 px-3 py-3", children: items.map((item) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-center gap-3 p-3", children: items.map((item) => {
     const isPositive = item.change >= 0;
     const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
     return /* @__PURE__ */ jsxs(
@@ -43,13 +43,13 @@ function TickerTapeRow({ items }) {
               ),
               variant: "outline",
               children: [
-                /* @__PURE__ */ jsx(TrendIcon, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(TrendIcon, { className: "size-3" }),
                 formatChange(item.change)
               ]
             }
           ),
           item.volume ? /* @__PURE__ */ jsxs("span", { className: "hidden items-center text-xs text-muted-foreground sm:inline-flex", children: [
-            /* @__PURE__ */ jsx(Dot, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx(Dot, { className: "size-3.5" }),
             item.volume
           ] }) : null
         ]

package/dist/components/timeline/index.js

@@ -0,0 +1,12 @@
+import {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+} from "./timeline";
+export {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+};

package/dist/components/timeline/timeline.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const STATUS_CLASSES = {
+  active: {
+    connector: "border-solid border-primary",
+    markerBorder: "border-primary",
+    markerFill: "bg-background ring-2 ring-primary"
+  },
+  completed: {
+    connector: "border-solid border-primary",
+    markerBorder: "border-primary",
+    markerFill: "bg-primary"
+  },
+  upcoming: {
+    connector: "border-dashed border-muted-foreground/40",
+    markerBorder: "border-muted-foreground/40",
+    markerFill: "bg-background"
+  }
+};
+const COLOR_OVERRIDES = {
+  amber: {
+    border: "border-amber-500",
+    fill: "bg-amber-500"
+  },
+  blue: {
+    border: "border-blue-500",
+    fill: "bg-blue-500"
+  },
+  emerald: {
+    border: "border-emerald-500",
+    fill: "bg-emerald-500"
+  },
+  neutral: {
+    border: "border-muted-foreground",
+    fill: "bg-muted-foreground"
+  },
+  purple: {
+    border: "border-purple-500",
+    fill: "bg-purple-500"
+  },
+  red: {
+    border: "border-red-500",
+    fill: "bg-red-500"
+  },
+  rose: {
+    border: "border-rose-500",
+    fill: "bg-rose-500"
+  }
+};
+const TimelineContext = createContext({
+  orientation: "vertical"
+});
+function useTimelineOrientation() {
+  return useContext(TimelineContext).orientation;
+}
+const timelineVariants = cva("flex", {
+  defaultVariants: {
+    orientation: "vertical"
+  },
+  variants: {
+    orientation: {
+      horizontal: "flex-row gap-0 overflow-x-auto",
+      vertical: "flex-col gap-0"
+    }
+  }
+});
+const Timeline = forwardRef(
+  ({ children, className, orientation, ...rest }, ref) => {
+    const resolvedOrientation = orientation ?? "vertical";
+    const contextValue = useMemo(
+      () => ({ orientation: resolvedOrientation }),
+      [resolvedOrientation]
+    );
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: cn(timelineVariants({ orientation }), className),
+        "data-orientation": resolvedOrientation,
+        ref,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+Timeline.displayName = "Timeline";
+function Marker({ color, icon, status }) {
+  const palette = STATUS_CLASSES[status];
+  const override = color ? COLOR_OVERRIDES[color] : void 0;
+  const borderClass = override?.border ?? palette.markerBorder;
+  const fillClass = override?.fill ?? palette.markerFill;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative z-10 flex size-6 shrink-0 items-center justify-center rounded-full border-2 bg-background text-[10px]",
+        borderClass
+      ),
+      children: icon ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex h-full w-full items-center justify-center text-foreground [&>svg]:h-3 [&>svg]:w-3",
+            status === "completed" ? "text-primary-foreground" : ""
+          ),
+          children: icon
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "size-2.5 rounded-full",
+            override ? fillClass : palette.markerFill
+          )
+        }
+      )
+    }
+  );
+}
+function Connector({ orientation, status }) {
+  const palette = STATUS_CLASSES[status];
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "absolute top-3 h-0 w-full border-t-2",
+          palette.connector
+        ),
+        style: { left: "calc(50% + 0.75rem)" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute left-3 top-6 h-full w-0 -translate-x-1/2 border-l-2",
+        palette.connector
+      )
+    }
+  );
+}
+function ItemBody({
+  children,
+  date,
+  description,
+  orientation,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col gap-0.5",
+        orientation === "horizontal" ? "items-center text-center" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-wrap items-baseline gap-x-2 gap-y-0.5",
+              orientation === "horizontal" ? "justify-center" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }),
+              date ? /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: date }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground", children }) : null
+      ]
+    }
+  );
+}
+const TimelineItem = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color,
+      date,
+      description,
+      icon,
+      isLast = false,
+      status = "upcoming",
+      title,
+      ...rest
+    } = props;
+    const orientation = useTimelineOrientation();
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn(
+          "relative",
+          orientation === "horizontal" ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1" : "flex items-start gap-3 pb-6 last:pb-0",
+          className
+        ),
+        "data-status": status,
+        ref,
+        ...rest,
+        children: [
+          isLast ? null : /* @__PURE__ */ jsx(Connector, { orientation, status }),
+          /* @__PURE__ */ jsx(Marker, { color, icon, status }),
+          /* @__PURE__ */ jsx(
+            ItemBody,
+            {
+              date,
+              description,
+              orientation,
+              title,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+export {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+};

package/dist/components/timeline-scrubber/index.js

@@ -0,0 +1,6 @@
+import {
+  TimelineScrubber
+} from "./timeline-scrubber";
+export {
+  TimelineScrubber
+};