@alishenriques/design-system 0.4.3 → 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/Quote/Quote.d.ts

@@ -1,10 +1,18 @@
 import { BlockquoteHTMLAttributes, ReactNode } from 'react';
+export type QuoteFloat = "none" | "left" | "right";
 export type QuoteProps = {
     children: ReactNode;
     /** Small comment-style marker before the text. Default: "#". */
     marker?: string;
     /** Shows a blinking block cursor after the text. Default: true. */
     cursor?: boolean;
+    /**
+     * Pulls the quote to a side, magazine-style, with surrounding text
+     * wrapping around it — only from the sm breakpoint up (640px); below that
+     * it always stacks in normal flow, since a floated quote has no room to
+     * breathe on a narrow screen. Default: "none" (stays inline, full width).
+     */
+    float?: QuoteFloat;
 } & Omit<BlockquoteHTMLAttributes<HTMLQuoteElement>, "children">;
 /**
  * A terminal-styled pull-quote: an accent left border, a comment-style marker
@@ -13,4 +21,4 @@ export type QuoteProps = {
  * calling out a key sentence from a longer piece of copy (a bio, an article)
  * as its own visual beat, semantically a `<blockquote>`.
  */
-export declare function Quote({ children, marker, cursor, className, ...props }: QuoteProps): import("react").JSX.Element;
+export declare function Quote({ children, marker, cursor, float, className, ...props }: QuoteProps): import("react").JSX.Element;

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_1og2n_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)}._marker_1og2n_12{flex-shrink:0;font-family:var(--ds-font-mono);font-weight:600;color:var(--ds-color-accent)}._text_1og2n_19{margin:0;font-family:var(--ds-font-mono);font-size:15px;line-height:1.6;color:var(--ds-color-fg)}._cursor_1og2n_27{display:inline-block;width:8px;height:15px;margin-left:4px;vertical-align:text-bottom;background:var(--ds-color-accent);animation:_blink_1og2n_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1og2n_27{animation:none}}@keyframes _blink_1og2n_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 L, jsx as e } from "react/jsx-runtime";
-import { useState as v, useEffect as $, useRef as D } from "react";
-const T = "_trigger_e3bgf_1", A = "_image_e3bgf_19", I = "_backdrop_e3bgf_26", S = "_backdropVisible_e3bgf_48", F = "_frame_e3bgf_55", K = "_frameVisible_e3bgf_61", P = "_circle_e3bgf_53", O = "_expandedImage_e3bgf_80", Q = "_closeButton_e3bgf_87", d = {
-  trigger: T,
-  image: A,
-  backdrop: I,
-  backdropVisible: S,
-  frame: F,
-  frameVisible: K,
+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: F,
+  backdropVisible: I,
+  frame: K,
+  frameVisible: R,
   circle: P,
-  expandedImage: O,
-  closeButton: Q
-}, R = 96, U = "min(70vw, 60vh, 440px)";
-function we({
-  src: t,
-  alt: o,
-  size: a = R,
-  expandedSize: n = U,
-  objectPosition: s = "center",
-  closeLabel: c = "Close",
-  className: m,
-  ...i
+  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 [u, b] = v(!1), [f, h] = v(!1);
+  const [_, u] = w(!1), [b, h] = w(!1);
   $(() => {
-    if (!u) return;
-    function g(V) {
-      V.key === "Escape" && b(!1);
+    if (!_) return;
+    function y(D) {
+      D.key === "Escape" && u(!1);
     }
-    document.addEventListener("keydown", g);
-    const w = document.body.style.overflow;
+    document.addEventListener("keydown", y);
+    const j = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const q = requestAnimationFrame(() => h(!0));
+    const A = requestAnimationFrame(() => h(!0));
     return () => {
-      document.removeEventListener("keydown", g), document.body.style.overflow = w, cancelAnimationFrame(q), h(!1);
+      document.removeEventListener("keydown", y), document.body.style.overflow = j, cancelAnimationFrame(A), h(!1);
     };
-  }, [u]);
-  const N = [d.trigger, m].filter(Boolean).join(" "), l = [d.frame, f && d.frameVisible].filter(Boolean).join(" "), _ = [d.backdrop, f && d.backdropVisible].filter(Boolean).join(" ");
+  }, [_]);
+  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: a, height: a },
-        onClick: () => b(!0),
+        className: B,
+        style: { width: s, height: s },
+        onClick: () => u(!0),
         "aria-haspopup": "dialog",
-        ...i,
+        ...d,
         children: /* @__PURE__ */ e(
           "img",
           {
-            src: t,
-            alt: o,
-            className: d.image,
-            style: { objectPosition: s },
+            src: n,
+            alt: t,
+            className: m.image,
+            style: { objectPosition: o },
             loading: "lazy"
           }
         )
       }
     ),
-    u && /* @__PURE__ */ e("div", { className: _, onClick: (g) => g.target === g.currentTarget && b(!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": o,
+        "aria-label": t,
         children: [
-          /* @__PURE__ */ e("div", { className: d.circle, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: m.circle, children: /* @__PURE__ */ e(
             "img",
             {
-              src: t,
-              alt: o,
-              className: d.expandedImage,
-              style: { objectPosition: s }
+              src: n,
+              alt: t,
+              className: m.expandedImage,
+              style: { objectPosition: o }
             }
           ) }),
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: d.closeButton,
-              onClick: () => b(!1),
-              "aria-label": c,
+              className: m.closeButton,
+              onClick: () => u(!1),
+              "aria-label": i,
               children: "×"
             }
           )
@@ -92,208 +92,316 @@ function we({
     ) })
   ] });
 }
-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 Be({
-  children: t,
-  variant: o = "primary",
-  type: a = "button",
-  className: n,
-  ...s
+function Ze({
+  children: n,
+  variant: t = "primary",
+  type: s = "button",
+  className: l,
+  ...o
 }) {
-  const c = [C.button, C[o], n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("button", { type: a, className: c, "data-variant": o, ...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", p = {
+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 $e({
-  items: t,
-  triggerLabel: o = "Search",
-  placeholder: a = "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 [m, i] = v(!1), [u, b] = v(""), f = D(null);
+  const [a, d] = w(!1), [_, u] = w(""), b = O(null);
   $(() => {
-    m && f.current?.focus();
-  }, [m]), $(() => {
-    function l(_) {
-      if ((_.metaKey || _.ctrlKey) && _.key.toLowerCase() === "k") {
-        _.preventDefault(), i((w) => !w);
+    a && b.current?.focus();
+  }, [a]), $(() => {
+    function c(f) {
+      if ((f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "k") {
+        f.preventDefault(), d((j) => !j);
         return;
       }
-      _.key === "Escape" && i(!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 h = t.filter((l) => `${l.label} ${l.hint ?? ""}`.toLowerCase().includes(u.trim().toLowerCase())), N = [p.trigger, s].filter(Boolean).join(" ");
+  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: N, onClick: () => i(!0), ...c, children: [
-      /* @__PURE__ */ e("span", { children: o }),
-      /* @__PURE__ */ e("kbd", { className: p.kbd, children: "⌘K" })
+    /* @__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" })
     ] }),
-    m && /* @__PURE__ */ e("div", { className: p.backdrop, onClick: (l) => l.target === l.currentTarget && i(!1), children: /* @__PURE__ */ r("div", { className: p.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: f,
+          ref: b,
           type: "text",
-          className: p.input,
-          placeholder: a,
-          value: u,
-          onChange: (l) => b(l.target.value),
+          className: g.input,
+          placeholder: s,
+          value: _,
+          onChange: (c) => u(c.target.value),
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ e("ul", { className: p.list, children: h.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: () => i(!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 Ce({ children: t, className: o, ...a }) {
-  const n = [te.eyebrow, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("p", { className: n, ...a, 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", oe = "_cursor_1yug9_10", j = {
+const se = "_loadingLabel_1yug9_1", le = "_cursor_1yug9_10", x = {
   loadingLabel: se,
-  cursor: oe
+  cursor: le
 };
-function je({
-  isLoading: t,
-  loadingText: o,
-  children: a,
-  className: n,
-  style: s,
-  disabled: c,
-  type: m = "button",
-  ...i
+function ze({
+  isLoading: n,
+  loadingText: t,
+  children: s,
+  className: l,
+  style: o,
+  disabled: i,
+  type: a = "button",
+  ...d
 }) {
-  const u = [n].filter(Boolean).join(" ");
+  const _ = [l].filter(Boolean).join(" ");
   return /* @__PURE__ */ e(
     "button",
     {
-      type: m,
-      className: u,
-      style: { ...s, ...t ? {
+      type: a,
+      className: _,
+      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,
-      ...i,
-      children: t ? /* @__PURE__ */ r("span", { className: j.loadingLabel, children: [
+      disabled: !!i || n,
+      "aria-busy": n || void 0,
+      ...d,
+      children: n ? /* @__PURE__ */ r("span", { className: x.loadingLabel, children: [
         /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "$" }),
-        o,
-        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: j.cursor })
-      ] }) : a
+        t,
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: x.cursor })
+      ] }) : s
     }
   );
 }
-const ae = "_panel_m16j3_1", ne = {
+const ae = "_panel_m16j3_1", ce = {
   panel: ae
 };
-function xe({ children: t, dots: o = !1, className: a, ...n }) {
-  const s = [ne.panel, o && "ds-dot-grid", a].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 Ee({ steps: t, className: o, ...a }) {
-  const n = [x.list, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...a, 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_1og2n_1", ie = "_marker_1og2n_12", de = "_text_1og2n_19", ue = "_cursor_1og2n_27", y = {
-  quote: ce,
-  marker: ie,
-  text: de,
-  cursor: ue
+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: v.floatLeft,
+  right: v.floatRight
 };
-function Le({ children: t, marker: o = "#", cursor: a = !0, className: n, ...s }) {
-  const c = [y.quote, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("blockquote", { className: c, ...s, children: [
-    /* @__PURE__ */ e("span", { className: y.marker, "aria-hidden": "true", children: o }),
-    /* @__PURE__ */ r("p", { className: y.text, children: [
-      t,
-      a && /* @__PURE__ */ e("span", { className: y.cursor, "aria-hidden": "true" })
+function We({
+  children: n,
+  marker: t = "#",
+  cursor: s = !0,
+  float: l = "none",
+  className: o,
+  ...i
+}) {
+  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 _e = "_grid_94gwu_1", me = "_cell_94gwu_12", be = "_value_94gwu_19", ge = "_label_94gwu_28", k = {
-  grid: _e,
-  cell: me,
-  value: be,
-  label: ge
+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 qe({ stats: t, className: o, ...a }) {
-  const n = [k.grid, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("dl", { className: n, ...a, 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 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 pe = "_list_17qxg_1", fe = "_tag_17qxg_10", E = {
-  list: pe,
-  tag: fe
+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 Ve({ tags: t, className: o, ...a }) {
-  const n = [E.list, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...a, children: t.map((s) => /* @__PURE__ */ e("li", { className: E.tag, children: s }, s)) });
+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 he = "_prompt_vxkw7_1", ye = "_path_vxkw7_11", ke = "_cursor_vxkw7_15", B = {
-  prompt: he,
-  path: ye,
-  cursor: ke
+const Ce = "_list_17qxg_1", Le = "_tag_17qxg_10", V = {
+  list: Ce,
+  tag: Le
 };
-function De({ user: t, host: o, command: a, className: n, ...s }) {
-  const c = [B.prompt, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("p", { className: c, ...s, children: [
-    /* @__PURE__ */ r("span", { className: B.path, children: [
-      t,
+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 Ee = "_prompt_vxkw7_1", xe = "_path_vxkw7_11", Se = "_cursor_vxkw7_15", C = {
+  prompt: Ee,
+  path: xe,
+  cursor: Se
+};
+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,
       "@",
-      o
+      t
     ] }),
     " ~$ ",
-    a,
-    /* @__PURE__ */ e("span", { className: B.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 {
-  we as Avatar,
-  Be as Button,
-  $e as CommandPalette,
-  Ce as Eyebrow,
-  je as LoadingButton,
-  xe as Panel,
-  Ee as PipelineBadges,
-  Le as Quote,
-  qe as StatGrid,
-  Ve 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.4.3",
+  "version": "0.6.0",
   "description": "Isolated design system for Alis portfolio and future products",
   "type": "module",
   "main": "./dist/index.js",