@alishenriques/design-system 0.5.0 → 0.6.0

package/README.md

@@ -35,10 +35,12 @@ yarn dev          # build em watch
 - `LoadingButton` — botão com estado de carregamento embutido (`isLoading`, `loadingText`)
 - `Panel` — superfície elevada com borda, com fundo em grade de pontos opcional
 - `PipelineBadges` — chips estilo pipeline de CI
-- `Quote` — citação em destaque estilo terminal (`#`/marcador customizável, cursor piscando opcional)
+- `Quote` — citação em destaque estilo terminal (`#`/marcador customizável, cursor piscando opcional, `float` para puxar para a lateral)
+- `SidePanel` — painel lateral deslizante estilo GitKraken (`open`/`onClose` controlados, fecha no ×/Escape/clique fora)
 - `StatGrid` — grade de estatísticas
 - `TagList` — lista de tags
 - `TerminalPrompt` — linha de prompt de terminal com cursor piscando
+- `Timeline` — grafo vertical estilo GitKraken (nós empilhados e clicáveis, ligados por linhas coloridas em rotação automática)
 
 Estilos via CSS Modules e tokens `--ds-*` (`src/tokens.css`).
 

package/dist/components/SidePanel/SidePanel.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type SidePanelProps = {
+    open: boolean;
+    onClose: () => void;
+    /** Accessible label for the dialog, e.g. the selected item's name. */
+    label: string;
+    children: ReactNode;
+    /** Accessible label for the × button that closes the panel. Default: "Close". */
+    closeLabel?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * A lateral drawer that slides in from the right over a dimming backdrop —
+ * the GitKraken-style detail panel. Stays mounted while closed (slides
+ * off-screen via a CSS transform, `aria-hidden` toggled) so the same
+ * transition plays going out, not just coming in. Closed by the × button, a
+ * backdrop click, or Escape.
+ */
+export declare function SidePanel({ open, onClose, label, children, closeLabel, className, ...props }: SidePanelProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SidePanel } from './SidePanel';
+export type { SidePanelProps } from './SidePanel';

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+export type TimelineItem = {
+    id: string;
+    label: string;
+    /** Small square logo shown inside the node. Falls back to the label's first letter. */
+    iconUrl?: string | null;
+};
+export type TimelineProps = {
+    items: TimelineItem[];
+    /** The currently selected item's id, if any. */
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+} & Omit<HTMLAttributes<HTMLOListElement>, "children">;
+/**
+ * A vertical, GitKraken-style commit graph: stacked, clickable nodes
+ * connected by colored lines, in the order given. Pair with `SidePanel` for
+ * the GitKraken-style sliding detail view.
+ */
+export declare function Timeline({ items, selectedId, onSelect, className, ...props }: TimelineProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Timeline } from './Timeline';
+export type { TimelineItem, TimelineProps } from './Timeline';

package/dist/design-system.css

@@ -1 +1 @@
-:root{--ds-color-bg: #0b0b0f;--ds-color-bg-raised: #131318;--ds-color-fg: #f4f1ea;--ds-color-muted: #9a958c;--ds-color-accent: #c8ff00;--ds-color-accent-ink: #111111;--ds-color-accent-soft: rgba(200, 255, 0, .1);--ds-color-border: rgba(244, 241, 234, .1);--ds-color-border-strong: rgba(244, 241, 234, .16);--ds-radius-sm: 8px;--ds-radius-md: 16px;--ds-space-1: .25rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-5: 1.5rem;--ds-space-6: 2rem;--ds-space-8: 3rem;--ds-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ds-font-display: "Archivo", system-ui, -apple-system, sans-serif;--ds-motion-fast: .18s cubic-bezier(.22, 1, .36, 1)}.ds-dot-grid{background-image:radial-gradient(circle at 1px 1px,var(--ds-color-border-strong) 1px,transparent 0);background-size:22px 22px}._trigger_e3bgf_1{display:inline-flex;padding:0;border:2px solid var(--ds-color-accent);border-radius:50%;overflow:hidden;cursor:pointer;background:var(--ds-color-bg-raised);transition:transform var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._trigger_e3bgf_1:hover,._trigger_e3bgf_1:focus-visible{transform:scale(1.03);outline:none;box-shadow:0 0 0 4px var(--ds-color-accent-soft)}._image_e3bgf_19{width:100%;height:100%;object-fit:cover;display:block}._backdrop_e3bgf_26{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0b0fb8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .22s ease-out}._backdropVisible_e3bgf_48{opacity:1}._frame_e3bgf_55{position:relative;opacity:0;transition:opacity .26s ease-out}._frameVisible_e3bgf_61{opacity:1}._circle_e3bgf_53{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:3px solid var(--ds-color-accent);box-shadow:0 20px 60px #00000080;transform:scale(.85);transition:transform .26s cubic-bezier(.22,1,.36,1)}._frameVisible_e3bgf_61 ._circle_e3bgf_53{transform:scale(1)}._expandedImage_e3bgf_80{width:100%;height:100%;object-fit:cover;display:block}._closeButton_e3bgf_87{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-fg);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ds-motion-fast),color var(--ds-motion-fast)}._closeButton_e3bgf_87:hover,._closeButton_e3bgf_87:focus-visible{border-color:var(--ds-color-accent);color:var(--ds-color-accent);outline:none}@media(prefers-reduced-motion:reduce){._backdrop_e3bgf_26,._frame_e3bgf_55,._circle_e3bgf_53{transition:none}}._button_1jhtl_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);border:0;border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-family:var(--ds-font-sans);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--ds-motion-fast),background-color var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._button_1jhtl_1:hover{transform:translateY(-1px)}._button_1jhtl_1:active{transform:translateY(0)}._button_1jhtl_1:disabled{cursor:not-allowed;opacity:.5;transform:none}._primary_1jhtl_33{background:var(--ds-color-accent);color:var(--ds-color-accent-ink);box-shadow:0 0 0 0 transparent}._primary_1jhtl_33:hover:not(:disabled){box-shadow:0 8px 24px color-mix(in srgb,var(--ds-color-accent) 35%,transparent)}._ghost_1jhtl_43{background:transparent;color:var(--ds-color-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-color-fg) 22%,transparent)}._trigger_10bud_1{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-family:var(--ds-font-mono);font-size:12px;white-space:nowrap;transition:color var(--ds-motion-fast),border-color var(--ds-motion-fast)}._trigger_10bud_1:hover,._trigger_10bud_1:focus-visible{color:var(--ds-color-fg);border-color:var(--ds-color-accent)}._kbd_10bud_23{background:var(--ds-color-bg);border:1px solid var(--ds-color-border-strong);border-radius:4px;padding:1px 5px;font-family:var(--ds-font-mono)}._backdrop_10bud_31{position:fixed;inset:0;background:#0b0b0fb3;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;z-index:100}._dialog_10bud_42{width:100%;max-width:520px;background:var(--ds-color-bg-raised);border:1px solid var(--ds-color-border-strong);border-radius:12px;overflow:hidden;font-family:var(--ds-font-mono);box-shadow:0 20px 60px #00000080}._input_10bud_53{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ds-color-border);color:var(--ds-color-fg);padding:16px 18px;font-family:var(--ds-font-mono);font-size:14px;outline:none}._input_10bud_53::placeholder{color:var(--ds-color-muted)}._list_10bud_69{list-style:none;margin:0;padding:8px;max-height:280px;overflow:auto}._list_10bud_69 a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ds-color-fg);font-size:13px}._list_10bud_69 a:hover,._list_10bud_69 a:focus-visible{background:var(--ds-color-accent-soft);color:var(--ds-color-accent)}._list_10bud_69 small{color:var(--ds-color-muted);font-size:11px}._eyebrow_1a4gy_1{margin:0;font-family:var(--ds-font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-muted)}._loadingLabel_1yug9_1{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--ds-font-mono);text-transform:lowercase}._cursor_1yug9_10{display:inline-block;width:7px;height:14px;background:var(--ds-color-accent);animation:_blink_1yug9_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1yug9_10{animation:none}}@keyframes _blink_1yug9_1{50%{opacity:0}}._panel_m16j3_1{position:relative;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-raised);padding:clamp(28px,5vw,64px)}._list_27va3_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none;font-family:var(--ds-font-mono);font-size:12px}._step_27va3_12{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ds-color-border-strong);border-radius:6px;padding:6px 10px;color:var(--ds-color-muted)}._step_27va3_12 b{color:var(--ds-color-accent);font-weight:600}._quote_sjisa_1{display:flex;align-items:flex-start;gap:var(--ds-space-3);margin:0;border-left:3px solid var(--ds-color-accent);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;background:var(--ds-color-accent-soft);padding:var(--ds-space-4) var(--ds-space-5)}@media(min-width:640px){._floatLeft_sjisa_13,._floatRight_sjisa_14{max-width:320px;margin-top:4px;margin-bottom:16px}._floatLeft_sjisa_13{float:left;margin-right:24px}._floatRight_sjisa_14{float:right;margin-left:24px}}._marker_sjisa_31{flex-shrink:0;font-family:var(--ds-font-mono);font-weight:600;color:var(--ds-color-accent)}._text_sjisa_38{margin:0;font-family:var(--ds-font-mono);font-size:15px;line-height:1.6;color:var(--ds-color-fg)}._cursor_sjisa_46{display:inline-block;width:8px;height:15px;margin-left:4px;vertical-align:text-bottom;background:var(--ds-color-accent);animation:_blink_sjisa_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_sjisa_46{animation:none}}@keyframes _blink_sjisa_1{50%{opacity:0}}._grid_94gwu_1{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--ds-color-border);border:1px solid var(--ds-color-border);border-radius:10px;overflow:hidden}._cell_94gwu_12{background:var(--ds-color-bg-raised);padding:var(--ds-space-4);display:flex;flex-direction:column-reverse}._value_94gwu_19{margin:0;font-family:var(--ds-font-mono);font-weight:700;font-size:22px;color:var(--ds-color-fg);font-variant-numeric:tabular-nums}._label_94gwu_28{font-family:var(--ds-font-mono);font-size:11px;color:var(--ds-color-muted);text-transform:uppercase;letter-spacing:.04em}._list_17qxg_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}._tag_17qxg_10{font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-color-fg);border:1px solid var(--ds-color-border-strong);border-radius:999px;padding:6px 12px}._prompt_vxkw7_1{margin:0;display:flex;align-items:center;gap:2px;font-family:var(--ds-font-mono);font-size:13px;color:var(--ds-color-accent)}._path_vxkw7_11{color:var(--ds-color-muted)}._cursor_vxkw7_15{display:inline-block;width:7px;height:15px;margin-left:2px;background:var(--ds-color-accent);animation:_blink_vxkw7_1 1.1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_vxkw7_15{animation:none;opacity:.7}}@keyframes _blink_vxkw7_1{50%{opacity:0}}
+:root{--ds-color-bg: #0b0b0f;--ds-color-bg-raised: #131318;--ds-color-fg: #f4f1ea;--ds-color-muted: #9a958c;--ds-color-accent: #c8ff00;--ds-color-accent-ink: #111111;--ds-color-accent-soft: rgba(200, 255, 0, .1);--ds-color-border: rgba(244, 241, 234, .1);--ds-color-border-strong: rgba(244, 241, 234, .16);--ds-radius-sm: 8px;--ds-radius-md: 16px;--ds-space-1: .25rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-5: 1.5rem;--ds-space-6: 2rem;--ds-space-8: 3rem;--ds-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ds-font-display: "Archivo", system-ui, -apple-system, sans-serif;--ds-motion-fast: .18s cubic-bezier(.22, 1, .36, 1)}.ds-dot-grid{background-image:radial-gradient(circle at 1px 1px,var(--ds-color-border-strong) 1px,transparent 0);background-size:22px 22px}._trigger_e3bgf_1{display:inline-flex;padding:0;border:2px solid var(--ds-color-accent);border-radius:50%;overflow:hidden;cursor:pointer;background:var(--ds-color-bg-raised);transition:transform var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._trigger_e3bgf_1:hover,._trigger_e3bgf_1:focus-visible{transform:scale(1.03);outline:none;box-shadow:0 0 0 4px var(--ds-color-accent-soft)}._image_e3bgf_19{width:100%;height:100%;object-fit:cover;display:block}._backdrop_e3bgf_26{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0b0fb8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .22s ease-out}._backdropVisible_e3bgf_48{opacity:1}._frame_e3bgf_55{position:relative;opacity:0;transition:opacity .26s ease-out}._frameVisible_e3bgf_61{opacity:1}._circle_e3bgf_53{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:3px solid var(--ds-color-accent);box-shadow:0 20px 60px #00000080;transform:scale(.85);transition:transform .26s cubic-bezier(.22,1,.36,1)}._frameVisible_e3bgf_61 ._circle_e3bgf_53{transform:scale(1)}._expandedImage_e3bgf_80{width:100%;height:100%;object-fit:cover;display:block}._closeButton_e3bgf_87{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-fg);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ds-motion-fast),color var(--ds-motion-fast)}._closeButton_e3bgf_87:hover,._closeButton_e3bgf_87:focus-visible{border-color:var(--ds-color-accent);color:var(--ds-color-accent);outline:none}@media(prefers-reduced-motion:reduce){._backdrop_e3bgf_26,._frame_e3bgf_55,._circle_e3bgf_53{transition:none}}._button_1jhtl_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);border:0;border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-family:var(--ds-font-sans);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--ds-motion-fast),background-color var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._button_1jhtl_1:hover{transform:translateY(-1px)}._button_1jhtl_1:active{transform:translateY(0)}._button_1jhtl_1:disabled{cursor:not-allowed;opacity:.5;transform:none}._primary_1jhtl_33{background:var(--ds-color-accent);color:var(--ds-color-accent-ink);box-shadow:0 0 0 0 transparent}._primary_1jhtl_33:hover:not(:disabled){box-shadow:0 8px 24px color-mix(in srgb,var(--ds-color-accent) 35%,transparent)}._ghost_1jhtl_43{background:transparent;color:var(--ds-color-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-color-fg) 22%,transparent)}._trigger_10bud_1{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-family:var(--ds-font-mono);font-size:12px;white-space:nowrap;transition:color var(--ds-motion-fast),border-color var(--ds-motion-fast)}._trigger_10bud_1:hover,._trigger_10bud_1:focus-visible{color:var(--ds-color-fg);border-color:var(--ds-color-accent)}._kbd_10bud_23{background:var(--ds-color-bg);border:1px solid var(--ds-color-border-strong);border-radius:4px;padding:1px 5px;font-family:var(--ds-font-mono)}._backdrop_10bud_31{position:fixed;inset:0;background:#0b0b0fb3;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;z-index:100}._dialog_10bud_42{width:100%;max-width:520px;background:var(--ds-color-bg-raised);border:1px solid var(--ds-color-border-strong);border-radius:12px;overflow:hidden;font-family:var(--ds-font-mono);box-shadow:0 20px 60px #00000080}._input_10bud_53{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ds-color-border);color:var(--ds-color-fg);padding:16px 18px;font-family:var(--ds-font-mono);font-size:14px;outline:none}._input_10bud_53::placeholder{color:var(--ds-color-muted)}._list_10bud_69{list-style:none;margin:0;padding:8px;max-height:280px;overflow:auto}._list_10bud_69 a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ds-color-fg);font-size:13px}._list_10bud_69 a:hover,._list_10bud_69 a:focus-visible{background:var(--ds-color-accent-soft);color:var(--ds-color-accent)}._list_10bud_69 small{color:var(--ds-color-muted);font-size:11px}._eyebrow_1a4gy_1{margin:0;font-family:var(--ds-font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-muted)}._loadingLabel_1yug9_1{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--ds-font-mono);text-transform:lowercase}._cursor_1yug9_10{display:inline-block;width:7px;height:14px;background:var(--ds-color-accent);animation:_blink_1yug9_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1yug9_10{animation:none}}@keyframes _blink_1yug9_1{50%{opacity:0}}._panel_m16j3_1{position:relative;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-raised);padding:clamp(28px,5vw,64px)}._list_27va3_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none;font-family:var(--ds-font-mono);font-size:12px}._step_27va3_12{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ds-color-border-strong);border-radius:6px;padding:6px 10px;color:var(--ds-color-muted)}._step_27va3_12 b{color:var(--ds-color-accent);font-weight:600}._quote_sjisa_1{display:flex;align-items:flex-start;gap:var(--ds-space-3);margin:0;border-left:3px solid var(--ds-color-accent);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;background:var(--ds-color-accent-soft);padding:var(--ds-space-4) var(--ds-space-5)}@media(min-width:640px){._floatLeft_sjisa_13,._floatRight_sjisa_14{max-width:320px;margin-top:4px;margin-bottom:16px}._floatLeft_sjisa_13{float:left;margin-right:24px}._floatRight_sjisa_14{float:right;margin-left:24px}}._marker_sjisa_31{flex-shrink:0;font-family:var(--ds-font-mono);font-weight:600;color:var(--ds-color-accent)}._text_sjisa_38{margin:0;font-family:var(--ds-font-mono);font-size:15px;line-height:1.6;color:var(--ds-color-fg)}._cursor_sjisa_46{display:inline-block;width:8px;height:15px;margin-left:4px;vertical-align:text-bottom;background:var(--ds-color-accent);animation:_blink_sjisa_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_sjisa_46{animation:none}}@keyframes _blink_sjisa_1{50%{opacity:0}}._backdrop_ihclc_1{position:fixed;inset:0;z-index:60;background:#0009;opacity:0;pointer-events:none;transition:opacity var(--ds-motion-fast)}._backdropVisible_ihclc_11{opacity:1;pointer-events:auto}._panel_ihclc_16{position:fixed;top:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;width:min(420px,100vw);overflow-y:auto;background:var(--ds-color-bg-raised);border-left:1px solid var(--ds-color-border-strong);box-shadow:-24px 0 48px #00000073;padding:var(--ds-space-6) var(--ds-space-5);padding-top:calc(var(--ds-space-6) + env(safe-area-inset-top,0px));transform:translate(100%);transition:transform var(--ds-motion-fast)}._panelOpen_ihclc_35{transform:translate(0)}._closeButton_ihclc_39{align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--ds-color-border-strong);border-radius:999px;background:none;color:var(--ds-color-muted);cursor:pointer;font-size:18px;line-height:1;flex:none}._closeButton_ihclc_39:hover{color:var(--ds-color-fg)}._content_ihclc_60{display:flex;flex-direction:column;gap:var(--ds-space-4);margin-top:var(--ds-space-5)}._grid_94gwu_1{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--ds-color-border);border:1px solid var(--ds-color-border);border-radius:10px;overflow:hidden}._cell_94gwu_12{background:var(--ds-color-bg-raised);padding:var(--ds-space-4);display:flex;flex-direction:column-reverse}._value_94gwu_19{margin:0;font-family:var(--ds-font-mono);font-weight:700;font-size:22px;color:var(--ds-color-fg);font-variant-numeric:tabular-nums}._label_94gwu_28{font-family:var(--ds-font-mono);font-size:11px;color:var(--ds-color-muted);text-transform:uppercase;letter-spacing:.04em}._list_17qxg_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}._tag_17qxg_10{font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-color-fg);border:1px solid var(--ds-color-border-strong);border-radius:999px;padding:6px 12px}._prompt_vxkw7_1{margin:0;display:flex;align-items:center;gap:2px;font-family:var(--ds-font-mono);font-size:13px;color:var(--ds-color-accent)}._path_vxkw7_11{color:var(--ds-color-muted)}._cursor_vxkw7_15{display:inline-block;width:7px;height:15px;margin-left:2px;background:var(--ds-color-accent);animation:_blink_vxkw7_1 1.1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_vxkw7_15{animation:none;opacity:.7}}@keyframes _blink_vxkw7_1{50%{opacity:0}}._list_nynky_1{--timeline-node-size: 48px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}._row_nynky_10{position:relative;padding-bottom:var(--ds-space-5)}._row_nynky_10:last-child{padding-bottom:0}._line_nynky_19{position:absolute;top:var(--timeline-node-size);bottom:0;left:calc(var(--timeline-node-size) / 2 - 1px);width:2px;background:var(--timeline-color);opacity:.55}._button_nynky_29{display:flex;align-items:center;gap:var(--ds-space-4);width:100%;background:none;border:0;padding:0;cursor:pointer;font-family:var(--ds-font-sans);text-align:left}._node_nynky_42{flex:none;display:flex;align-items:center;justify-content:center;width:var(--timeline-node-size);height:var(--timeline-node-size);border-radius:50%;background:var(--ds-color-bg-raised);border:2px solid var(--timeline-color);box-shadow:0 0 0 4px var(--ds-color-bg);overflow:hidden;transition:transform var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._button_nynky_29:hover ._node_nynky_42,._button_nynky_29:focus-visible ._node_nynky_42{transform:scale(1.06)}._nodeSelected_nynky_64{box-shadow:0 0 0 4px var(--ds-color-bg),0 0 0 7px var(--timeline-color)}._icon_nynky_68{width:100%;height:100%;object-fit:cover}._fallback_nynky_74{font-family:var(--ds-font-mono);font-weight:700;font-size:16px;color:var(--timeline-color)}._label_nynky_81{font-size:15px;font-weight:500;color:var(--ds-color-fg)}._button_nynky_29:focus-visible{outline:2px solid var(--ds-color-accent);outline-offset:4px;border-radius:var(--ds-radius-sm)}

package/dist/index.d.ts

@@ -14,9 +14,13 @@ export { PipelineBadges } from './components/PipelineBadges';
 export type { PipelineBadgesProps, PipelineStep } from './components/PipelineBadges';
 export { Quote } from './components/Quote';
 export type { QuoteProps } from './components/Quote';
+export { SidePanel } from './components/SidePanel';
+export type { SidePanelProps } from './components/SidePanel';
 export { StatGrid } from './components/StatGrid';
 export type { Stat, StatGridProps } from './components/StatGrid';
 export { TagList } from './components/TagList';
 export type { TagListProps } from './components/TagList';
 export { TerminalPrompt } from './components/TerminalPrompt';
 export type { TerminalPromptProps } from './components/TerminalPrompt';
+export { Timeline } from './components/Timeline';
+export type { TimelineItem, TimelineProps } from './components/Timeline';

package/dist/index.js

@@ -1,89 +1,89 @@
 "use client";
-import { jsxs as r, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useState as v, useEffect as B, useRef as V } from "react";
-const A = "_trigger_e3bgf_1", T = "_image_e3bgf_19", D = "_backdrop_e3bgf_26", F = "_backdropVisible_e3bgf_48", I = "_frame_e3bgf_55", R = "_frameVisible_e3bgf_61", K = "_circle_e3bgf_53", O = "_expandedImage_e3bgf_80", P = "_closeButton_e3bgf_87", u = {
-  trigger: A,
+import { jsxs as r, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { useState as w, useEffect as $, useRef as O } from "react";
+const q = "_trigger_e3bgf_1", T = "_image_e3bgf_19", F = "_backdrop_e3bgf_26", I = "_backdropVisible_e3bgf_48", K = "_frame_e3bgf_55", R = "_frameVisible_e3bgf_61", P = "_circle_e3bgf_53", U = "_expandedImage_e3bgf_80", G = "_closeButton_e3bgf_87", m = {
+  trigger: q,
   image: T,
-  backdrop: D,
-  backdropVisible: F,
-  frame: I,
+  backdrop: F,
+  backdropVisible: I,
+  frame: K,
   frameVisible: R,
-  circle: K,
-  expandedImage: O,
-  closeButton: P
-}, Q = 96, U = "min(70vw, 60vh, 440px)";
-function Ce({
-  src: t,
-  alt: a,
-  size: o = Q,
-  expandedSize: n = U,
-  objectPosition: s = "center",
-  closeLabel: c = "Close",
-  className: i,
+  circle: P,
+  expandedImage: U,
+  closeButton: G
+}, Q = 96, Z = "min(70vw, 60vh, 440px)";
+function Qe({
+  src: n,
+  alt: t,
+  size: s = Q,
+  expandedSize: l = Z,
+  objectPosition: o = "center",
+  closeLabel: i = "Close",
+  className: a,
   ...d
 }) {
-  const [_, f] = v(!1), [h, y] = v(!1);
-  B(() => {
+  const [_, u] = w(!1), [b, h] = w(!1);
+  $(() => {
     if (!_) return;
-    function b(S) {
-      S.key === "Escape" && f(!1);
+    function y(D) {
+      D.key === "Escape" && u(!1);
     }
-    document.addEventListener("keydown", b);
-    const w = document.body.style.overflow;
+    document.addEventListener("keydown", y);
+    const j = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const q = requestAnimationFrame(() => y(!0));
+    const A = requestAnimationFrame(() => h(!0));
     return () => {
-      document.removeEventListener("keydown", b), document.body.style.overflow = w, cancelAnimationFrame(q), y(!1);
+      document.removeEventListener("keydown", y), document.body.style.overflow = j, cancelAnimationFrame(A), h(!1);
     };
   }, [_]);
-  const N = [u.trigger, i].filter(Boolean).join(" "), l = [u.frame, h && u.frameVisible].filter(Boolean).join(" "), m = [u.backdrop, h && u.backdropVisible].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r(E, { children: [
+  const B = [m.trigger, a].filter(Boolean).join(" "), c = [m.frame, b && m.frameVisible].filter(Boolean).join(" "), f = [m.backdrop, b && m.backdropVisible].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { children: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        className: N,
-        style: { width: o, height: o },
-        onClick: () => f(!0),
+        className: B,
+        style: { width: s, height: s },
+        onClick: () => u(!0),
         "aria-haspopup": "dialog",
         ...d,
         children: /* @__PURE__ */ e(
           "img",
           {
-            src: t,
-            alt: a,
-            className: u.image,
-            style: { objectPosition: s },
+            src: n,
+            alt: t,
+            className: m.image,
+            style: { objectPosition: o },
             loading: "lazy"
           }
         )
       }
     ),
-    _ && /* @__PURE__ */ e("div", { className: m, onClick: (b) => b.target === b.currentTarget && f(!1), children: /* @__PURE__ */ r(
+    _ && /* @__PURE__ */ e("div", { className: f, onClick: (y) => y.target === y.currentTarget && u(!1), children: /* @__PURE__ */ r(
       "div",
       {
-        className: l,
-        style: { width: n, height: n },
+        className: c,
+        style: { width: l, height: l },
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": a,
+        "aria-label": t,
         children: [
-          /* @__PURE__ */ e("div", { className: u.circle, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: m.circle, children: /* @__PURE__ */ e(
             "img",
             {
-              src: t,
-              alt: a,
-              className: u.expandedImage,
-              style: { objectPosition: s }
+              src: n,
+              alt: t,
+              className: m.expandedImage,
+              style: { objectPosition: o }
             }
           ) }),
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: u.closeButton,
-              onClick: () => f(!1),
-              "aria-label": c,
+              className: m.closeButton,
+              onClick: () => u(!1),
+              "aria-label": i,
               children: "×"
             }
           )
@@ -92,221 +92,316 @@ function Ce({
     ) })
   ] });
 }
-const Z = "_button_1jhtl_1", G = "_primary_1jhtl_33", X = "_ghost_1jhtl_43", C = {
-  button: Z,
-  primary: G,
-  ghost: X
+const M = "_button_1jhtl_1", X = "_primary_1jhtl_33", z = "_ghost_1jhtl_43", E = {
+  button: M,
+  primary: X,
+  ghost: z
 };
-function $e({
-  children: t,
-  variant: a = "primary",
-  type: o = "button",
-  className: n,
-  ...s
+function Ze({
+  children: n,
+  variant: t = "primary",
+  type: s = "button",
+  className: l,
+  ...o
 }) {
-  const c = [C.button, C[a], n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("button", { type: o, className: c, "data-variant": a, ...s, children: t });
+  const i = [E.button, E[t], l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("button", { type: s, className: i, "data-variant": t, ...o, children: n });
 }
-const H = "_trigger_10bud_1", J = "_kbd_10bud_23", M = "_backdrop_10bud_31", W = "_dialog_10bud_42", Y = "_input_10bud_53", z = "_list_10bud_69", g = {
+const H = "_trigger_10bud_1", J = "_kbd_10bud_23", W = "_backdrop_10bud_31", Y = "_dialog_10bud_42", ee = "_input_10bud_53", ne = "_list_10bud_69", g = {
   trigger: H,
   kbd: J,
-  backdrop: M,
-  dialog: W,
-  input: Y,
-  list: z
+  backdrop: W,
+  dialog: Y,
+  input: ee,
+  list: ne
 };
-function xe({
-  items: t,
-  triggerLabel: a = "Search",
-  placeholder: o = "Type a command or search…",
-  label: n = "Command palette",
-  className: s,
-  ...c
+function Me({
+  items: n,
+  triggerLabel: t = "Search",
+  placeholder: s = "Type a command or search…",
+  label: l = "Command palette",
+  className: o,
+  ...i
 }) {
-  const [i, d] = v(!1), [_, f] = v(""), h = V(null);
-  B(() => {
-    i && h.current?.focus();
-  }, [i]), B(() => {
-    function l(m) {
-      if ((m.metaKey || m.ctrlKey) && m.key.toLowerCase() === "k") {
-        m.preventDefault(), d((w) => !w);
+  const [a, d] = w(!1), [_, u] = w(""), b = O(null);
+  $(() => {
+    a && b.current?.focus();
+  }, [a]), $(() => {
+    function c(f) {
+      if ((f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "k") {
+        f.preventDefault(), d((j) => !j);
         return;
       }
-      m.key === "Escape" && d(!1);
+      f.key === "Escape" && d(!1);
     }
-    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
   }, []);
-  const y = t.filter((l) => `${l.label} ${l.hint ?? ""}`.toLowerCase().includes(_.trim().toLowerCase())), N = [g.trigger, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r(E, { children: [
-    /* @__PURE__ */ r("button", { type: "button", className: N, onClick: () => d(!0), ...c, children: [
-      /* @__PURE__ */ e("span", { children: a }),
+  const h = n.filter((c) => `${c.label} ${c.hint ?? ""}`.toLowerCase().includes(_.trim().toLowerCase())), B = [g.trigger, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ r("button", { type: "button", className: B, onClick: () => d(!0), ...i, children: [
+      /* @__PURE__ */ e("span", { children: t }),
       /* @__PURE__ */ e("kbd", { className: g.kbd, children: "⌘K" })
     ] }),
-    i && /* @__PURE__ */ e("div", { className: g.backdrop, onClick: (l) => l.target === l.currentTarget && d(!1), children: /* @__PURE__ */ r("div", { className: g.dialog, role: "dialog", "aria-modal": "true", "aria-label": n, children: [
+    a && /* @__PURE__ */ e("div", { className: g.backdrop, onClick: (c) => c.target === c.currentTarget && d(!1), children: /* @__PURE__ */ r("div", { className: g.dialog, role: "dialog", "aria-modal": "true", "aria-label": l, children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: h,
+          ref: b,
           type: "text",
           className: g.input,
-          placeholder: o,
+          placeholder: s,
           value: _,
-          onChange: (l) => f(l.target.value),
+          onChange: (c) => u(c.target.value),
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ e("ul", { className: g.list, children: y.map((l) => (
+      /* @__PURE__ */ e("ul", { className: g.list, children: h.map((c) => (
         // Keyed by href, not label: two items can share a label (e.g.
         // a nav link and a more specific shortcut to the same topic).
-        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r("a", { href: l.href, onClick: () => d(!1), children: [
-          /* @__PURE__ */ e("span", { children: l.label }),
-          l.hint && /* @__PURE__ */ e("small", { children: l.hint })
-        ] }) }, l.href)
+        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r("a", { href: c.href, onClick: () => d(!1), children: [
+          /* @__PURE__ */ e("span", { children: c.label }),
+          c.hint && /* @__PURE__ */ e("small", { children: c.hint })
+        ] }) }, c.href)
       )) })
     ] }) })
   ] });
 }
-const ee = "_eyebrow_1a4gy_1", te = {
-  eyebrow: ee
+const te = "_eyebrow_1a4gy_1", oe = {
+  eyebrow: te
 };
-function Le({ children: t, className: a, ...o }) {
-  const n = [te.eyebrow, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("p", { className: n, ...o, children: t });
+function Xe({ children: n, className: t, ...s }) {
+  const l = [oe.eyebrow, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("p", { className: l, ...s, children: n });
 }
-const se = "_loadingLabel_1yug9_1", ae = "_cursor_1yug9_10", $ = {
+const se = "_loadingLabel_1yug9_1", le = "_cursor_1yug9_10", x = {
   loadingLabel: se,
-  cursor: ae
+  cursor: le
 };
-function Ee({
-  isLoading: t,
-  loadingText: a,
-  children: o,
-  className: n,
-  style: s,
-  disabled: c,
-  type: i = "button",
+function ze({
+  isLoading: n,
+  loadingText: t,
+  children: s,
+  className: l,
+  style: o,
+  disabled: i,
+  type: a = "button",
   ...d
 }) {
-  const _ = [n].filter(Boolean).join(" ");
+  const _ = [l].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "button",
     {
-      type: i,
+      type: a,
       className: _,
-      style: { ...s, ...t ? {
+      style: { ...o, ...n ? {
         background: "var(--ds-color-bg)",
         border: "1px solid var(--ds-color-accent)",
         color: "var(--ds-color-accent)",
         opacity: 1
       } : void 0 },
-      disabled: !!c || t,
-      "aria-busy": t || void 0,
+      disabled: !!i || n,
+      "aria-busy": n || void 0,
       ...d,
-      children: t ? /* @__PURE__ */ r("span", { className: $.loadingLabel, children: [
+      children: n ? /* @__PURE__ */ r("span", { className: x.loadingLabel, children: [
         /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "$" }),
-        a,
-        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $.cursor })
-      ] }) : o
+        t,
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: x.cursor })
+      ] }) : s
     }
   );
 }
-const oe = "_panel_m16j3_1", ne = {
-  panel: oe
+const ae = "_panel_m16j3_1", ce = {
+  panel: ae
 };
-function qe({ children: t, dots: a = !1, className: o, ...n }) {
-  const s = [ne.panel, a && "ds-dot-grid", o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { className: s, ...n, children: t });
+function He({ children: n, dots: t = !1, className: s, ...l }) {
+  const o = [ce.panel, t && "ds-dot-grid", s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: o, ...l, children: n });
 }
-const le = "_list_27va3_1", re = "_step_27va3_12", x = {
-  list: le,
-  step: re
+const re = "_list_27va3_1", ie = "_step_27va3_12", S = {
+  list: re,
+  step: ie
 };
-function Se({ steps: t, className: a, ...o }) {
-  const n = [x.list, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...o, children: t.map((s) => /* @__PURE__ */ r("li", { className: x.step, children: [
-    s.label,
+function Je({ steps: n, className: t, ...s }) {
+  const l = [S.list, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: l, ...s, children: n.map((o) => /* @__PURE__ */ r("li", { className: S.step, children: [
+    o.label,
     " ",
-    /* @__PURE__ */ e("b", { children: s.value })
-  ] }, s.label)) });
+    /* @__PURE__ */ e("b", { children: o.value })
+  ] }, o.label)) });
 }
-const ce = "_quote_sjisa_1", ie = "_floatLeft_sjisa_13", de = "_floatRight_sjisa_14", ue = "_marker_sjisa_31", _e = "_text_sjisa_38", me = "_cursor_sjisa_46", p = {
-  quote: ce,
-  floatLeft: ie,
-  floatRight: de,
-  marker: ue,
-  text: _e,
-  cursor: me
+const de = "_quote_sjisa_1", ue = "_floatLeft_sjisa_13", _e = "_floatRight_sjisa_14", be = "_marker_sjisa_31", me = "_text_sjisa_38", pe = "_cursor_sjisa_46", v = {
+  quote: de,
+  floatLeft: ue,
+  floatRight: _e,
+  marker: be,
+  text: me,
+  cursor: pe
 }, fe = {
   none: void 0,
-  left: p.floatLeft,
-  right: p.floatRight
+  left: v.floatLeft,
+  right: v.floatRight
 };
-function Ve({
-  children: t,
-  marker: a = "#",
-  cursor: o = !0,
-  float: n = "none",
-  className: s,
-  ...c
+function We({
+  children: n,
+  marker: t = "#",
+  cursor: s = !0,
+  float: l = "none",
+  className: o,
+  ...i
 }) {
-  const i = [p.quote, fe[n], s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("blockquote", { className: i, ...c, children: [
-    /* @__PURE__ */ e("span", { className: p.marker, "aria-hidden": "true", children: a }),
-    /* @__PURE__ */ r("p", { className: p.text, children: [
-      t,
-      o && /* @__PURE__ */ e("span", { className: p.cursor, "aria-hidden": "true" })
+  const a = [v.quote, fe[l], o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("blockquote", { className: a, ...i, children: [
+    /* @__PURE__ */ e("span", { className: v.marker, "aria-hidden": "true", children: t }),
+    /* @__PURE__ */ r("p", { className: v.text, children: [
+      n,
+      s && /* @__PURE__ */ e("span", { className: v.cursor, "aria-hidden": "true" })
     ] })
   ] });
 }
-const be = "_grid_94gwu_1", ge = "_cell_94gwu_12", pe = "_value_94gwu_19", he = "_label_94gwu_28", k = {
-  grid: be,
-  cell: ge,
-  value: pe,
-  label: he
+const he = "_backdrop_ihclc_1", ye = "_backdropVisible_ihclc_11", ge = "_panel_ihclc_16", ke = "_panelOpen_ihclc_35", ve = "_closeButton_ihclc_39", Ne = "_content_ihclc_60", k = {
+  backdrop: he,
+  backdropVisible: ye,
+  panel: ge,
+  panelOpen: ke,
+  closeButton: ve,
+  content: Ne
+};
+function Ye({
+  open: n,
+  onClose: t,
+  label: s,
+  children: l,
+  closeLabel: o = "Close",
+  className: i,
+  ...a
+}) {
+  $(() => {
+    if (!n) return;
+    function u(h) {
+      h.key === "Escape" && t();
+    }
+    document.addEventListener("keydown", u);
+    const b = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", u), document.body.style.overflow = b;
+    };
+  }, [n, t]);
+  const d = [k.backdrop, n && k.backdropVisible].filter(Boolean).join(" "), _ = [k.panel, n && k.panelOpen, i].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ e("div", { className: d, "aria-hidden": "true", onClick: () => n && t() }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: _,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": s,
+        "aria-hidden": !n,
+        inert: !n,
+        ...a,
+        children: [
+          /* @__PURE__ */ e("button", { type: "button", className: k.closeButton, onClick: t, "aria-label": o, children: "×" }),
+          /* @__PURE__ */ e("div", { className: k.content, children: l })
+        ]
+      }
+    )
+  ] });
+}
+const we = "_grid_94gwu_1", $e = "_cell_94gwu_12", Be = "_value_94gwu_19", je = "_label_94gwu_28", N = {
+  grid: we,
+  cell: $e,
+  value: Be,
+  label: je
 };
-function Ae({ stats: t, className: a, ...o }) {
-  const n = [k.grid, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("dl", { className: n, ...o, children: t.map((s) => /* @__PURE__ */ r("div", { className: k.cell, children: [
-    /* @__PURE__ */ e("dd", { className: k.value, children: s.value }),
-    /* @__PURE__ */ e("dt", { className: k.label, children: s.label })
-  ] }, s.label)) });
+function en({ stats: n, className: t, ...s }) {
+  const l = [N.grid, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("dl", { className: l, ...s, children: n.map((o) => /* @__PURE__ */ r("div", { className: N.cell, children: [
+    /* @__PURE__ */ e("dd", { className: N.value, children: o.value }),
+    /* @__PURE__ */ e("dt", { className: N.label, children: o.label })
+  ] }, o.label)) });
 }
-const ye = "_list_17qxg_1", ke = "_tag_17qxg_10", L = {
-  list: ye,
-  tag: ke
+const Ce = "_list_17qxg_1", Le = "_tag_17qxg_10", V = {
+  list: Ce,
+  tag: Le
 };
-function Te({ tags: t, className: a, ...o }) {
-  const n = [L.list, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...o, children: t.map((s) => /* @__PURE__ */ e("li", { className: L.tag, children: s }, s)) });
+function nn({ tags: n, className: t, ...s }) {
+  const l = [V.list, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: l, ...s, children: n.map((o) => /* @__PURE__ */ e("li", { className: V.tag, children: o }, o)) });
 }
-const ve = "_prompt_vxkw7_1", Ne = "_path_vxkw7_11", we = "_cursor_vxkw7_15", j = {
-  prompt: ve,
-  path: Ne,
-  cursor: we
+const Ee = "_prompt_vxkw7_1", xe = "_path_vxkw7_11", Se = "_cursor_vxkw7_15", C = {
+  prompt: Ee,
+  path: xe,
+  cursor: Se
 };
-function De({ user: t, host: a, command: o, className: n, ...s }) {
-  const c = [j.prompt, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("p", { className: c, ...s, children: [
-    /* @__PURE__ */ r("span", { className: j.path, children: [
-      t,
+function tn({ user: n, host: t, command: s, className: l, ...o }) {
+  const i = [C.prompt, l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("p", { className: i, ...o, children: [
+    /* @__PURE__ */ r("span", { className: C.path, children: [
+      n,
       "@",
-      a
+      t
     ] }),
     " ~$ ",
-    o,
-    /* @__PURE__ */ e("span", { className: j.cursor, "aria-hidden": "true" })
+    s,
+    /* @__PURE__ */ e("span", { className: C.cursor, "aria-hidden": "true" })
   ] });
 }
+const Ve = "_list_nynky_1", Ae = "_row_nynky_10", De = "_line_nynky_19", Oe = "_button_nynky_29", qe = "_node_nynky_42", Te = "_nodeSelected_nynky_64", Fe = "_icon_nynky_68", Ie = "_fallback_nynky_74", Ke = "_label_nynky_81", p = {
+  list: Ve,
+  row: Ae,
+  line: De,
+  button: Oe,
+  node: qe,
+  nodeSelected: Te,
+  icon: Fe,
+  fallback: Ie,
+  label: Ke
+}, Re = 137.508;
+function Pe(n) {
+  return `hsl(${Math.round(n * Re % 360)}deg 70% 60%)`;
+}
+function on({ items: n, selectedId: t, onSelect: s, className: l, ...o }) {
+  const i = [p.list, l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ol", { className: i, ...o, children: n.map((a, d) => {
+    const _ = Pe(d), u = a.id === t, b = [p.node, u && p.nodeSelected].filter(Boolean).join(" ");
+    return /* @__PURE__ */ r(
+      "li",
+      {
+        className: p.row,
+        style: { "--timeline-color": _ },
+        children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: p.button,
+              onClick: () => s?.(a.id),
+              "aria-pressed": u,
+              children: [
+                /* @__PURE__ */ e("span", { className: b, children: a.iconUrl ? /* @__PURE__ */ e("img", { src: a.iconUrl, alt: "", className: p.icon, loading: "lazy" }) : /* @__PURE__ */ e("span", { className: p.fallback, "aria-hidden": "true", children: a.label.charAt(0).toUpperCase() }) }),
+                /* @__PURE__ */ e("span", { className: p.label, children: a.label })
+              ]
+            }
+          ),
+          d < n.length - 1 && /* @__PURE__ */ e("span", { className: p.line, "aria-hidden": "true" })
+        ]
+      },
+      a.id
+    );
+  }) });
+}
 export {
-  Ce as Avatar,
-  $e as Button,
-  xe as CommandPalette,
-  Le as Eyebrow,
-  Ee as LoadingButton,
-  qe as Panel,
-  Se as PipelineBadges,
-  Ve as Quote,
-  Ae as StatGrid,
-  Te as TagList,
-  De as TerminalPrompt
+  Qe as Avatar,
+  Ze as Button,
+  Me as CommandPalette,
+  Xe as Eyebrow,
+  ze as LoadingButton,
+  He as Panel,
+  Je as PipelineBadges,
+  We as Quote,
+  Ye as SidePanel,
+  en as StatGrid,
+  nn as TagList,
+  tn as TerminalPrompt,
+  on as Timeline
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alishenriques/design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Isolated design system for Alis portfolio and future products",
   "type": "module",
   "main": "./dist/index.js",