@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/SortMenu/SortMenu.js

@@ -0,0 +1,74 @@
+"use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup.js";
+import { MenuItem } from "../Menu/Menu.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { SortAscendingIcon } from "../../icons/generated/SortAscendingIcon.js";
+import { SortDescendingIcon } from "../../icons/generated/SortDescendingIcon.js";
+import SortMenu_module_default from "./SortMenu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/SortMenu/SortMenu.tsx
+/**
+* Sıralama seçimi: alanı seçen açılır menü (APG Menu Button, tek seçimli) ve yönü değiştiren düğme;
+* ikisi bitişik düğme grubudur.
+*/
+function SortMenu({ options, value, defaultValue, onChange, size = "sm", label, isDisabled, className, id }) {
+	const t = useMessages();
+	const [internal, setInternal] = useState(() => defaultValue ?? {
+		field: options[0]?.id ?? "",
+		direction: "desc"
+	});
+	const current = value ?? internal;
+	const field = options.find((o) => o.id === current.field) ?? options[0];
+	const change = (next) => {
+		if (value === void 0) setInternal(next);
+		onChange?.(next);
+	};
+	const directionText = current.direction === "asc" ? t.sortAscending : t.sortDescending;
+	return /* @__PURE__ */ jsxs(ButtonGroup, {
+		layout: "attached",
+		label: label ?? t.sortMenuLabel,
+		className: [SortMenu_module_default.root, className].filter(Boolean).join(" "),
+		id,
+		children: [/* @__PURE__ */ jsx(DropdownMenu, {
+			trigger: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size,
+				isDisabled,
+				iconStart: current.direction === "asc" ? /* @__PURE__ */ jsx(SortAscendingIcon, {}) : /* @__PURE__ */ jsx(SortDescendingIcon, {}),
+				iconEnd: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+				children: template(t.sortMenuTrigger, { field: field?.label ?? "" })
+			}),
+			selectionMode: "single",
+			selectedKeys: field ? [field.id] : [],
+			disallowEmptySelection: true,
+			onSelectionChange: (keys) => {
+				const next = [...keys][0];
+				if (next && next !== current.field) change({
+					...current,
+					field: next
+				});
+			},
+			children: options.map((o) => /* @__PURE__ */ jsx(MenuItem, {
+				id: o.id,
+				children: o.label
+			}, o.id))
+		}), /* @__PURE__ */ jsx(IconButton, {
+			variant: "secondary",
+			size,
+			isDisabled,
+			label: template(t.sortMenuDirection, { direction: directionText }),
+			icon: current.direction === "asc" ? /* @__PURE__ */ jsx(SortAscendingIcon, {}) : /* @__PURE__ */ jsx(SortDescendingIcon, {}),
+			onPress: () => change({
+				...current,
+				direction: current.direction === "asc" ? "desc" : "asc"
+			})
+		})]
+	});
+}
+export { SortMenu };

package/dist/components/SortMenu/SortMenu.module.js

@@ -0,0 +1,4 @@
+import './SortMenu.css';
+// src/components/SortMenu/SortMenu.module.css
+var SortMenu_module_default = { "root": "sti-SortMenu-root-373c5" };
+export { SortMenu_module_default as default };

package/dist/components/SplitButton/SplitButton.js

@@ -1,8 +1,8 @@
 "use client";
 import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
 import { useMessages } from "../../provider/UIProvider.js";
-import { IconButton } from "../IconButton/IconButton.js";
 import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { ActionMenu } from "../_internal/menu/ActionMenu.js";
 import SplitButton_module_default from "./SplitButton.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Stat/Stat.js

@@ -3,8 +3,8 @@ import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.
 import { capitalize, template } from "../../text/text.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { MinusIcon } from "../../icons/generated/MinusIcon.js";
-import { ArrowUpIcon } from "../../icons/generated/ArrowUpIcon.js";
 import { ArrowDownIcon } from "../../icons/generated/ArrowDownIcon.js";
+import { ArrowUpIcon } from "../../icons/generated/ArrowUpIcon.js";
 import Stat_module_default from "./Stat.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/Stat/Stat.tsx

package/dist/components/Steps/Steps.js

@@ -1,8 +1,8 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { AlertIcon } from "../../icons/generated/AlertIcon.js";
 import Steps_module_default from "./Steps.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/TextArea/TextArea.js

@@ -1,8 +1,8 @@
 "use client";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
 import { CharacterCounter, characterCount } from "../CharacterCounter/CharacterCounter.js";
 import TextArea_module_default from "./TextArea.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ThemeSwitch/ThemeSwitch.js

@@ -1,9 +1,9 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import { MenuItem } from "../Menu/Menu.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
-import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import { MonitorIcon } from "../../icons/generated/MonitorIcon.js";
 import { MoonIcon } from "../../icons/generated/MoonIcon.js";
 import { SunIcon } from "../../icons/generated/SunIcon.js";

package/dist/components/TimeField/TimeField.js

@@ -15,6 +15,7 @@ function TimeField$1({ label, description, errorMessage, showOptional, size = "m
 	return /* @__PURE__ */ jsx(I18nProvider, {
 		locale,
 		children: /* @__PURE__ */ jsxs(TimeField, {
+			shouldForceLeadingZeros: true,
 			...rest,
 			value: value === void 0 ? void 0 : toTime(value),
 			defaultValue: toTime(defaultValue),

package/dist/components/TimeSlotPicker/TimeSlotPicker.d.ts

@@ -1,10 +1,5 @@
+import { TimeSlot } from "./timeSlots.js";
 import { ReactNode } from "react";
-export interface TimeSlot {
-  /** Başlangıç saati ("09:30"). */
-  time: string;
-  /** Dolu ya da kapalı saat (seçilemez, görünür kalır). */
-  isUnavailable?: boolean;
-}
 export interface TimeSlotPickerProps {
   label: ReactNode;
   description?: ReactNode;
@@ -28,11 +23,6 @@ export interface TimeSlotPickerProps {
   className?: string;
   id?: string;
 }
-/**
- * Aralıktan saatler: `timeSlots("09:00", "17:00", 30)` → 09:00, 09:30 … 16:30 (bitiş dahil
- * değildir: son randevu bitişte biter). `unavailable` dolu saatleri işaretler.
- */
-export declare function timeSlots(start: string, end: string, stepMinutes: number, unavailable?: readonly string[]): TimeSlot[];
 /**
  * Randevu saati seçimi: saatler hap biçiminde ızgarada (React Aria ListBox, `layout="grid"`);
  * dolu saatler üstü çizili ve seçilemez, sabah, öğleden sonra ve akşam başlıklarıyla gruplu. Oklar

package/dist/components/TimeSlotPicker/TimeSlotPicker.js

@@ -4,33 +4,11 @@ import { template } from "../../text/text.js";
 import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
 import { fieldStyles } from "../Field/Field.js";
 import TimeSlotPicker_module_default from "./TimeSlotPicker.module.js";
+import { toMinutes, toTime } from "./timeSlots.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Header, ListBox, ListBoxItem, ListBoxSection } from "react-aria-components";
 // src/components/TimeSlotPicker/TimeSlotPicker.tsx
-const toMinutes = (t) => {
-	const m = /^(\d{1,2}):(\d{2})$/.exec(t);
-	return m ? Number(m[1]) * 60 + Number(m[2]) : NaN;
-};
-const toTime = (min) => `${String(Math.floor(min / 60) % 24).padStart(2, "0")}:${String(min % 60).padStart(2, "0")}`;
-/**
-* Aralıktan saatler: `timeSlots("09:00", "17:00", 30)` → 09:00, 09:30 … 16:30 (bitiş dahil
-* değildir: son randevu bitişte biter). `unavailable` dolu saatleri işaretler.
-*/
-function timeSlots(start, end, stepMinutes, unavailable = []) {
-	const from = toMinutes(start);
-	const to = toMinutes(end);
-	if (!Number.isFinite(from) || !Number.isFinite(to) || stepMinutes <= 0) return [];
-	const out = [];
-	for (let m = from; m + stepMinutes <= to; m += stepMinutes) {
-		const time = toTime(m);
-		out.push({
-			time,
-			isUnavailable: unavailable.includes(time)
-		});
-	}
-	return out;
-}
 const partOf = (t) => {
 	const m = toMinutes(t);
 	return m < 720 ? "morning" : m < 1020 ? "afternoon" : "evening";
@@ -159,4 +137,4 @@ function TimeSlotPicker({ label, description, errorMessage, slots, value, defaul
 		]
 	});
 }
-export { TimeSlotPicker, timeSlots };
+export { TimeSlotPicker };

package/dist/components/TimeSlotPicker/index.d.ts

@@ -1,2 +1,3 @@
-import { TimeSlot, TimeSlotPicker, TimeSlotPickerProps, timeSlots } from "./TimeSlotPicker.js";
-export { TimeSlot, TimeSlotPicker, TimeSlotPickerProps, timeSlots };
+import { TimeSlot, timeSlots } from "./timeSlots.js";
+import { TimeSlotPicker, TimeSlotPickerProps } from "./TimeSlotPicker.js";
+export { type TimeSlot, TimeSlotPicker, TimeSlotPickerProps, timeSlots };

package/dist/components/TimeSlotPicker/timeSlots.d.ts

@@ -0,0 +1,12 @@
+/** Saat aralığı yardımcıları: istemci yönergesi yoktur, sunucu bileşeninden de çağrılır. */
+export interface TimeSlot {
+  /** Başlangıç saati ("09:30"). */
+  time: string;
+  /** Dolu ya da kapalı saat (seçilemez, görünür kalır). */
+  isUnavailable?: boolean;
+}
+/**
+ * Aralıktan saatler: `timeSlots("09:00", "17:00", 30)` → 09:00, 09:30 … 16:30 (bitiş dahil
+ * değildir: son randevu bitişte biter). `unavailable` dolu saatleri işaretler.
+ */
+export declare function timeSlots(start: string, end: string, stepMinutes: number, unavailable?: readonly string[]): TimeSlot[];

package/dist/components/TimeSlotPicker/timeSlots.js

@@ -0,0 +1,25 @@
+// src/components/TimeSlotPicker/timeSlots.ts
+const toMinutes = (t) => {
+	const m = /^(\d{1,2}):(\d{2})$/.exec(t);
+	return m ? Number(m[1]) * 60 + Number(m[2]) : NaN;
+};
+const toTime = (min) => `${String(Math.floor(min / 60) % 24).padStart(2, "0")}:${String(min % 60).padStart(2, "0")}`;
+/**
+* Aralıktan saatler: `timeSlots("09:00", "17:00", 30)` → 09:00, 09:30 … 16:30 (bitiş dahil
+* değildir: son randevu bitişte biter). `unavailable` dolu saatleri işaretler.
+*/
+function timeSlots(start, end, stepMinutes, unavailable = []) {
+	const from = toMinutes(start);
+	const to = toMinutes(end);
+	if (!Number.isFinite(from) || !Number.isFinite(to) || stepMinutes <= 0) return [];
+	const out = [];
+	for (let m = from; m + stepMinutes <= to; m += stepMinutes) {
+		const time = toTime(m);
+		out.push({
+			time,
+			isUnavailable: unavailable.includes(time)
+		});
+	}
+	return out;
+}
+export { timeSlots, toMinutes, toTime };

package/dist/components/Timeline/Timeline.css

@@ -0,0 +1,187 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Timeline-root-d4494 {
+    --sti-timeline-marker: 1.75rem;
+    --sti-timeline-gap: var(--sti-space-5);
+    --sti-timeline-line: var(--sti-border);
+    --sti-timeline-title: var(--sti-font-size-md);
+    --sti-timeline-title-leading: var(--sti-line-height-md);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-Timeline-root-d4494[data-size="sm"] {
+    --sti-timeline-marker: 1.25rem;
+    --sti-timeline-gap: var(--sti-space-3);
+    --sti-timeline-title: var(--sti-font-size-sm);
+    --sti-timeline-title-leading: var(--sti-line-height-sm);
+  }
+
+  .sti-Timeline-item-b5a1e {
+    --sti-timeline-fill: var(--sti-bg-surface-active);
+    --sti-timeline-ink: var(--sti-fg-muted);
+    grid-template-columns: var(--sti-timeline-marker) minmax(0, 1fr);
+    column-gap: var(--sti-space-3);
+    padding-block-end: var(--sti-timeline-gap);
+    display: grid;
+    position: relative;
+  }
+
+  .sti-Timeline-item-b5a1e[data-last] {
+    padding-block-end: 0;
+  }
+
+  .sti-Timeline-item-b5a1e:not([data-last]):before {
+    content: "";
+    inset-block: calc(var(--sti-timeline-marker) + var(--sti-space-1)) var(--sti-space-1);
+    border-inline-start: var(--sti-border-width) solid var(--sti-timeline-line);
+    position: absolute;
+    inset-inline-start: calc((var(--sti-timeline-marker) - var(--sti-border-width)) / 2);
+  }
+
+  .sti-Timeline-item-b5a1e[data-next-upcoming]:before {
+    border-inline-start-style: dashed;
+  }
+
+  .sti-Timeline-item-b5a1e[data-tone="accent"] {
+    --sti-timeline-fill: var(--sti-bg-accent-subtle);
+    --sti-timeline-ink: var(--sti-fg-accent);
+  }
+
+  .sti-Timeline-item-b5a1e[data-tone="success"] {
+    --sti-timeline-fill: var(--sti-bg-success-subtle);
+    --sti-timeline-ink: var(--sti-fg-success);
+  }
+
+  .sti-Timeline-item-b5a1e[data-tone="warning"] {
+    --sti-timeline-fill: var(--sti-bg-warning-subtle);
+    --sti-timeline-ink: var(--sti-fg-warning);
+  }
+
+  .sti-Timeline-item-b5a1e[data-tone="danger"] {
+    --sti-timeline-fill: var(--sti-bg-danger-subtle);
+    --sti-timeline-ink: var(--sti-fg-danger);
+  }
+
+  .sti-Timeline-item-b5a1e[data-tone="info"] {
+    --sti-timeline-fill: var(--sti-bg-info-subtle);
+    --sti-timeline-ink: var(--sti-fg-info);
+  }
+
+  .sti-Timeline-marker-03d10 {
+    box-sizing: border-box;
+    inline-size: var(--sti-timeline-marker);
+    block-size: var(--sti-timeline-marker);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-timeline-fill);
+    color: var(--sti-timeline-ink);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-Timeline-icon-85fdb {
+    font-size: calc(var(--sti-timeline-marker) * .55);
+    display: inline-flex;
+  }
+
+  .sti-Timeline-dot-bfe0a {
+    inline-size: calc(var(--sti-timeline-marker) * .3);
+    block-size: calc(var(--sti-timeline-marker) * .3);
+    border-radius: var(--sti-radius-pill);
+    background: currentColor;
+  }
+
+  .sti-Timeline-item-b5a1e[data-status="current"] .sti-Timeline-marker-03d10 {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    box-shadow: 0 0 0 var(--sti-space-1) var(--sti-bg-accent-subtle);
+  }
+
+  .sti-Timeline-item-b5a1e[data-status="upcoming"] .sti-Timeline-marker-03d10 {
+    border-color: var(--sti-border);
+    background: var(--sti-bg-canvas);
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-Timeline-body-de27d {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding-block-start: calc((var(--sti-timeline-marker) - var(--sti-timeline-title-leading)) / 2);
+    display: grid;
+  }
+
+  .sti-Timeline-head-7a161 {
+    align-items: baseline;
+    gap: 0 var(--sti-space-3);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-Timeline-title-87c2b {
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-size: var(--sti-timeline-title);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-timeline-title-leading);
+    overflow-wrap: anywhere;
+    flex: 12rem;
+  }
+
+  .sti-Timeline-item-b5a1e[data-status="current"] .sti-Timeline-title-87c2b {
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-Timeline-item-b5a1e[data-status="upcoming"] .sti-Timeline-title-87c2b {
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-Timeline-time-ca5cb {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+    flex: none;
+  }
+
+  .sti-Timeline-description-bd947 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-Timeline-extra-d49f8 {
+    min-inline-size: 0;
+    margin-block-start: var(--sti-space-2);
+  }
+
+  .sti-Timeline-empty-a5bad {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Timeline-marker-03d10 {
+      border-color: canvastext;
+    }
+
+    .sti-Timeline-item-b5a1e:not([data-last]):before {
+      border-inline-start-color: canvastext;
+    }
+
+    .sti-Timeline-item-b5a1e[data-status="current"] .sti-Timeline-marker-03d10 {
+      color: highlighttext;
+      forced-color-adjust: none;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
+}

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,48 @@
+import { Locale } from "../../provider/locale.js";
+import { ReactNode } from "react";
+export type TimelineTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+export type TimelineStatus = "done" | "current" | "upcoming";
+export interface TimelineItem {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** Olayın adı ("Sipariş kargoya verildi"). */
+  title: ReactNode;
+  /** Olay zamanı; `time` öğesiyle ve ISO `dateTime` ile yazılır. */
+  time?: Date | number;
+  /** Zamanın yerine yazılacak metin ("Tahmini: 5 Kasım"). */
+  timeLabel?: ReactNode;
+  /** Başlığın altında kısa açıklama. */
+  description?: ReactNode;
+  /** İşaretin içindeki süs ikonu; yoksa nokta çizilir. */
+  icon?: ReactNode;
+  /** İşaretin rengi; varsayılan `neutral`. */
+  tone?: TimelineTone;
+  /**
+   * Süreçteki yeri: `done` (varsayılan), `current` (vurgulanır, `aria-current="step"`),
+   * `upcoming` (içi boş işaret, kesik bağlayıcı, sakin yazı).
+   */
+  status?: TimelineStatus;
+  /** Açıklamanın altında ek içerik (kart, bağlantı, dosya). */
+  children?: ReactNode;
+}
+export interface TimelineProps {
+  items: readonly TimelineItem[];
+  /** Listenin adı (zorunlu): "Sipariş geçmişi". */
+  label: string;
+  /** `sm` yoğun (yan panel), `md` sayfa. */
+  size?: "sm" | "md";
+  /** Zamanların dili; varsayılan Türkçe. */
+  locale?: Locale;
+  /** Zamanların yazıldığı saat dilimi. */
+  timeZone?: string;
+  /** Olay yokken gösterilecek içerik. */
+  emptyState?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Zaman çizelgesi: zamana göre sıralı olaylar dikey bir çizgi üzerinde. Her olayın tonlu bir
+ * işareti, başlığı, zamanı ve açıklaması vardır; bulunulan olay vurgulanır, gelecek olaylar
+ * kesik çizgiyle bağlanır. Sunucu bileşenidir.
+ */
+export declare function Timeline({ items, label, size, locale, timeZone, emptyState, className, id }: TimelineProps): import("react").JSX.Element;

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,72 @@
+import { createFormatter } from "../../format/formatter.js";
+import Timeline_module_default from "./Timeline.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Timeline/Timeline.tsx
+/**
+* Zaman çizelgesi: zamana göre sıralı olaylar dikey bir çizgi üzerinde. Her olayın tonlu bir
+* işareti, başlığı, zamanı ve açıklaması vardır; bulunulan olay vurgulanır, gelecek olaylar
+* kesik çizgiyle bağlanır. Sunucu bileşenidir.
+*/
+function Timeline({ items, label, size = "md", locale, timeZone, emptyState, className, id }) {
+	if (items.length === 0 && emptyState) return /* @__PURE__ */ jsx("div", {
+		className: Timeline_module_default.empty,
+		children: emptyState
+	});
+	const format = createFormatter({
+		locale,
+		timeZone
+	});
+	return /* @__PURE__ */ jsx("ol", {
+		id,
+		"aria-label": label,
+		className: [Timeline_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: items.map((item, i) => {
+			const status = item.status ?? "done";
+			const next = items[i + 1];
+			return /* @__PURE__ */ jsxs("li", {
+				className: Timeline_module_default.item,
+				"data-status": status,
+				"data-tone": item.tone ?? "neutral",
+				"data-last": next ? void 0 : "",
+				"data-next-upcoming": next?.status === "upcoming" ? "" : void 0,
+				"aria-current": status === "current" ? "step" : void 0,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: Timeline_module_default.marker,
+					"aria-hidden": "true",
+					children: item.icon ? /* @__PURE__ */ jsx("span", {
+						className: Timeline_module_default.icon,
+						children: item.icon
+					}) : /* @__PURE__ */ jsx("span", { className: Timeline_module_default.dot })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: Timeline_module_default.body,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: Timeline_module_default.head,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: Timeline_module_default.title,
+								children: item.title
+							}), item.timeLabel !== void 0 ? /* @__PURE__ */ jsx("span", {
+								className: Timeline_module_default.time,
+								children: item.timeLabel
+							}) : item.time !== void 0 ? /* @__PURE__ */ jsx("time", {
+								className: Timeline_module_default.time,
+								dateTime: new Date(item.time).toISOString(),
+								children: format.dateTime(item.time)
+							}) : null]
+						}),
+						item.description ? /* @__PURE__ */ jsx("p", {
+							className: Timeline_module_default.description,
+							children: item.description
+						}) : null,
+						item.children ? /* @__PURE__ */ jsx("div", {
+							className: Timeline_module_default.extra,
+							children: item.children
+						}) : null
+					]
+				})]
+			}, item.id);
+		})
+	});
+}
+export { Timeline };

package/dist/components/Timeline/Timeline.module.js

@@ -0,0 +1,17 @@
+import './Timeline.css';
+// src/components/Timeline/Timeline.module.css
+var Timeline_module_default = {
+	"root": "sti-Timeline-root-d4494",
+	"item": "sti-Timeline-item-b5a1e",
+	"marker": "sti-Timeline-marker-03d10",
+	"icon": "sti-Timeline-icon-85fdb",
+	"dot": "sti-Timeline-dot-bfe0a",
+	"body": "sti-Timeline-body-de27d",
+	"head": "sti-Timeline-head-7a161",
+	"title": "sti-Timeline-title-87c2b",
+	"time": "sti-Timeline-time-ca5cb",
+	"description": "sti-Timeline-description-bd947",
+	"extra": "sti-Timeline-extra-d49f8",
+	"empty": "sti-Timeline-empty-a5bad"
+};
+export { Timeline_module_default as default };

package/dist/components/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+import { Timeline, TimelineItem, TimelineProps, TimelineStatus, TimelineTone } from "./Timeline.js";
+export { Timeline, TimelineItem, TimelineProps, TimelineStatus, TimelineTone };

package/dist/components/ToastQueue/ToastQueue.js

@@ -1,10 +1,10 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { useThemeContext } from "../_internal/themeContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { useThemeContext } from "../_internal/themeContext.js";
 import { toneIcon } from "../Alert/toneIcon.js";
 import { CloseButton } from "../CloseButton/CloseButton.js";
-import { Button as Button$1 } from "../Button/Button.js";
 import { toast } from "../Toast/toast.js";
 import ToastQueue_module_default from "./ToastQueue.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Tour/Tour.css

@@ -0,0 +1,26 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Tour-target-32114 {
+    z-index: var(--sti-z-raised);
+    outline: var(--sti-focus-ring-width) solid var(--sti-fill-accent);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 calc(3px + var(--sti-focus-ring-width) + 4px)
+      color-mix(in srgb, var(--sti-fill-accent) 22%, transparent);
+    transition: outline-color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-base) var(--sti-ease-out);
+    position: relative;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Tour-target-32114 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Tour-target-32114 {
+      box-shadow: none;
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/Tour/Tour.js

@@ -4,6 +4,7 @@ import { template } from "../../text/text.js";
 import { Button } from "../Button/Button.js";
 import floating_module_default from "../_internal/overlay/floating.module.js";
 import { FloatingCard } from "../_internal/overlay/FloatingCard.js";
+import Tour_module_default from "./Tour.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 // src/components/Tour/Tour.tsx
@@ -70,6 +71,14 @@ function Tour({ steps, isOpen, onOpenChange, step, defaultStep = 0, onStepChange
 		requested,
 		steps
 	]);
+	useEffect(() => {
+		if (shown === null) return;
+		const target = steps[shown]?.targetRef.current;
+		const ring = Tour_module_default.target;
+		if (!target || !ring) return;
+		target.classList.add(ring);
+		return () => target.classList.remove(ring);
+	}, [shown, steps]);
 	useEffect(() => {
 		if (shown === null) return;
 		const frame = requestAnimationFrame(() => primary.current?.focus());

package/dist/components/Tour/Tour.module.js

@@ -0,0 +1,4 @@
+import './Tour.css';
+// src/components/Tour/Tour.module.css
+var Tour_module_default = { "target": "sti-Tour-target-32114" };
+export { Tour_module_default as default };