@alishenriques/design-system 0.1.0 → 0.3.0

package/README.md

@@ -28,6 +28,19 @@ yarn dev          # build em watch
 
 ## Componentes
 
+- `Avatar` — foto circular que expande em overlay (zoom, blur no fundo, fecha no ×/Escape/clique fora)
 - `Button` (`primary`, `ghost`)
+- `CommandPalette` — busca/atalhos em overlay (⌘K)
+- `Eyebrow` — rótulo pequeno em maiúsculas
+- `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
+- `StatGrid` — grade de estatísticas
+- `TagList` — lista de tags
+- `TerminalPrompt` — linha de prompt de terminal com cursor piscando
 
 Estilos via CSS Modules e tokens `--ds-*` (`src/tokens.css`).
+
+## Convenção: quando um componente entra aqui
+
+Qualquer componente **reaproveitável em mais de um contexto** — não amarrado a uma marca, texto ou dado específico de um produto — nasce **aqui**, não direto no app consumidor: props dinâmicas (nunca texto/comportamento fixo), componente desacoplado (sem depender de dado externo específico de um app) e sempre com testes unitários. `alis-portfolio` só importa e consome; ele não duplica esses componentes localmente. Exemplo: `LoadingButton` e `Avatar` nasceram de necessidades do portfólio, mas como nada neles é específico do portfólio (o texto de carregamento e o rótulo do botão de fechar são props), vivem aqui. Já `Logo` (a marca do Alisson) e `LoadingOverlay` (que usa esse `Logo` internamente) ficam no `alis-portfolio`, por serem específicos daquele produto.

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes } from 'react';
+export type AvatarProps = {
+    /** Image URL. */
+    src: string;
+    /** Accessible name for the photo — used for both the trigger and the expanded dialog. */
+    alt: string;
+    /** Diameter of the collapsed circular thumbnail, in px. Default: 96. */
+    size?: number;
+    /** Any valid CSS size for the expanded photo. Default: "min(70vw, 60vh, 440px)". */
+    expandedSize?: string;
+    /**
+     * CSS `object-position` for the crop, in both states — e.g. "top" when a
+     * centred crop clips the subject's head. Default: "center".
+     */
+    objectPosition?: string;
+    /** Accessible label for the × button that closes the expanded photo. Default: "Close". */
+    closeLabel?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "onClick">;
+/**
+ * A circular photo that expands into a large, centred, blurred-backdrop
+ * overlay on click — the same round crop, just bigger, with a zoom-in
+ * transition. Closed by the × button, a backdrop click, or Escape.
+ */
+export declare function Avatar({ src, alt, size, expandedSize, objectPosition, closeLabel, className, ...props }: AvatarProps): import("react").JSX.Element;

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

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

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes } from 'react';
+export type CommandPaletteItem = {
+    label: string;
+    href: string;
+    /** Short trailing hint, e.g. "7 empresas" or "↗ github.com/…" */
+    hint?: string;
+};
+export type CommandPaletteProps = {
+    items: CommandPaletteItem[];
+    /** Text on the trigger button. Default: "Search" */
+    triggerLabel?: string;
+    /** Input placeholder. Default: "Type a command or search…" */
+    placeholder?: string;
+    /** Accessible label for the dialog. Default: "Command palette" */
+    label?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "onClick">;
+/**
+ * A trigger button plus overlay: filterable list of links, opened by clicking
+ * the trigger or pressing Cmd/Ctrl+K anywhere on the page, closed by Escape,
+ * a backdrop click, or picking an item.
+ */
+export declare function CommandPalette({ items, triggerLabel, placeholder, label, className, ...props }: CommandPaletteProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteItem, CommandPaletteProps } from './CommandPalette';

package/dist/components/Eyebrow/Eyebrow.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type EyebrowProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLParagraphElement>;
+/** Small, muted, uppercase label used above a headline or to tag a block of content. */
+export declare function Eyebrow({ children, className, ...props }: EyebrowProps): import("react").JSX.Element;

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

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

package/dist/components/LoadingButton/LoadingButton.d.ts

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type LoadingButtonProps = {
+    /** Shows the loading treatment instead of `children`, and disables the button while true. */
+    isLoading: boolean;
+    /**
+     * The word shown after "$" while loading (e.g. "sending"). Not translated
+     * by this component — pass an already-localised string, so every caller
+     * can phrase it for its own action instead of a hardcoded label.
+     */
+    loadingText: string;
+    children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+/**
+ * A button with a built-in, terminal-styled loading state: while `isLoading`,
+ * it goes dark with an accent border and its label becomes "$ {loadingText}"
+ * with a blinking block cursor — feedback right on the button, as an
+ * alternative to a full-screen loading overlay for actions with a natural,
+ * local place to show progress (a form's submit button is the first user).
+ *
+ * Idle appearance (colour, padding, icon) is entirely up to the consumer's
+ * own `className`/`style`/`children`; this component only overlays the
+ * loading look on top, and only while `isLoading` is true, so it works for
+ * any button in any host app. That override is applied via inline styles,
+ * not a CSS class: a consumer's own stylesheet (Tailwind, CSS Modules,
+ * anything) could be bundled either side of this package's CSS, so a
+ * class-based override can't reliably win the cascade — inline styles always
+ * do, short of the consumer using `!important`.
+ */
+export declare function LoadingButton({ isLoading, loadingText, children, className, style, disabled, type, ...props }: LoadingButtonProps): import("react").JSX.Element;

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

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

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type PanelProps = {
+    children: ReactNode;
+    /** Applies the subtle dot-grid background used behind hero content. */
+    dots?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+/** A raised, bordered surface — the base container for hero and card content. */
+export declare function Panel({ children, dots, className, ...props }: PanelProps): import("react").JSX.Element;

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

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

package/dist/components/PipelineBadges/PipelineBadges.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+export type PipelineStep = {
+    /** e.g. "lint" */
+    label: string;
+    /** e.g. "✓" or "29 ✓". Pass real values — never invent numbers. */
+    value: string;
+};
+export type PipelineBadgesProps = {
+    steps: PipelineStep[];
+} & Omit<HTMLAttributes<HTMLUListElement>, "children">;
+/** A row of small chips reporting real pipeline facts, e.g. `lint ✓`, `test 29 ✓`. */
+export declare function PipelineBadges({ steps, className, ...props }: PipelineBadgesProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { PipelineBadges } from './PipelineBadges';
+export type { PipelineBadgesProps, PipelineStep } from './PipelineBadges';

package/dist/components/StatGrid/StatGrid.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+export type Stat = {
+    /** e.g. "17+" */
+    value: string;
+    /** e.g. "anos de experiência" */
+    label: string;
+};
+export type StatGridProps = {
+    stats: Stat[];
+} & Omit<HTMLAttributes<HTMLDListElement>, "children">;
+/** A responsive grid of big-number stat tiles, e.g. years of experience, tests passing. */
+export declare function StatGrid({ stats, className, ...props }: StatGridProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { StatGrid } from './StatGrid';
+export type { Stat, StatGridProps } from './StatGrid';

package/dist/components/TagList/TagList.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type TagListProps = {
+    tags: string[];
+} & Omit<HTMLAttributes<HTMLUListElement>, "children">;
+/** A row of small outline pills, e.g. a list of technologies or skills. */
+export declare function TagList({ tags, className, ...props }: TagListProps): import("react").JSX.Element;

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

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

package/dist/components/TerminalPrompt/TerminalPrompt.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+export type TerminalPromptProps = {
+    /** e.g. "alisson" */
+    user: string;
+    /** e.g. "portfolio" */
+    host: string;
+    /** The command shown after the prompt, e.g. "whoami" */
+    command: string;
+} & Omit<HTMLAttributes<HTMLParagraphElement>, "children">;
+/** A single terminal-style prompt line with a blinking cursor, e.g. `user@host ~$ command`. */
+export declare function TerminalPrompt({ user, host, command, className, ...props }: TerminalPromptProps): import("react").JSX.Element;

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

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

package/dist/design-system.css

@@ -1 +1 @@
-:root{--ds-color-bg: #0b0b0f;--ds-color-fg: #f4f1ea;--ds-color-muted: #9a958c;--ds-color-accent: #c8ff00;--ds-color-accent-ink: #111111;--ds-radius-sm: 8px;--ds-radius-md: 16px;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-font-sans: "Geist", "Segoe UI", sans-serif;--ds-motion-fast: .18s cubic-bezier(.22, 1, .36, 1)}._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)}
+: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}._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}}

package/dist/index.d.ts

@@ -1,2 +1,20 @@
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
 export { Button } from './components/Button';
 export type { ButtonProps, ButtonVariant } from './components/Button';
+export { CommandPalette } from './components/CommandPalette';
+export type { CommandPaletteItem, CommandPaletteProps } from './components/CommandPalette';
+export { Eyebrow } from './components/Eyebrow';
+export type { EyebrowProps } from './components/Eyebrow';
+export { LoadingButton } from './components/LoadingButton';
+export type { LoadingButtonProps } from './components/LoadingButton';
+export { Panel } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+export { PipelineBadges } from './components/PipelineBadges';
+export type { PipelineBadgesProps, PipelineStep } from './components/PipelineBadges';
+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';

package/dist/index.js

@@ -1,19 +1,282 @@
-import { jsx as _ } from "react/jsx-runtime";
-const c = "_button_1jhtl_1", i = "_primary_1jhtl_33", l = "_ghost_1jhtl_43", o = {
-  button: c,
-  primary: i,
-  ghost: l
-};
-function m({
-  children: n,
-  variant: t = "primary",
-  type: s = "button",
-  className: r,
-  ...a
+"use client";
+import { jsxs as r, Fragment as E, jsx as e } from "react/jsx-runtime";
+import { useState as k, useEffect as B, 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", q = "_circle_e3bgf_53", P = "_expandedImage_e3bgf_80", O = "_closeButton_e3bgf_87", d = {
+  trigger: T,
+  image: A,
+  backdrop: I,
+  backdropVisible: S,
+  frame: F,
+  frameVisible: K,
+  circle: q,
+  expandedImage: P,
+  closeButton: O
+}, R = 96, U = "min(70vw, 60vh, 440px)";
+function he({
+  src: t,
+  alt: a,
+  size: l = R,
+  expandedSize: n = U,
+  objectPosition: s = "center",
+  closeLabel: c = "Close",
+  className: m,
+  ...i
 }) {
-  const u = [o.button, o[t], r].filter(Boolean).join(" ");
-  return /* @__PURE__ */ _("button", { type: s, className: u, "data-variant": t, ...a, children: n });
+  const [u, b] = k(!1), [f, h] = k(!1);
+  B(() => {
+    if (!u) return;
+    function p(V) {
+      V.key === "Escape" && b(!1);
+    }
+    document.addEventListener("keydown", p);
+    const N = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const L = requestAnimationFrame(() => h(!0));
+    return () => {
+      document.removeEventListener("keydown", p), document.body.style.overflow = N, cancelAnimationFrame(L), h(!1);
+    };
+  }, [u]);
+  const v = [d.trigger, m].filter(Boolean).join(" "), o = [d.frame, f && d.frameVisible].filter(Boolean).join(" "), _ = [d.backdrop, f && d.backdropVisible].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(E, { children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: v,
+        style: { width: l, height: l },
+        onClick: () => b(!0),
+        "aria-haspopup": "dialog",
+        ...i,
+        children: /* @__PURE__ */ e(
+          "img",
+          {
+            src: t,
+            alt: a,
+            className: d.image,
+            style: { objectPosition: s },
+            loading: "lazy"
+          }
+        )
+      }
+    ),
+    u && /* @__PURE__ */ e("div", { className: _, onClick: (p) => p.target === p.currentTarget && b(!1), children: /* @__PURE__ */ r(
+      "div",
+      {
+        className: o,
+        style: { width: n, height: n },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": a,
+        children: [
+          /* @__PURE__ */ e("div", { className: d.circle, children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: t,
+              alt: a,
+              className: d.expandedImage,
+              style: { objectPosition: s }
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: d.closeButton,
+              onClick: () => b(!1),
+              "aria-label": c,
+              children: "×"
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+const Z = "_button_1jhtl_1", G = "_primary_1jhtl_33", Q = "_ghost_1jhtl_43", C = {
+  button: Z,
+  primary: G,
+  ghost: Q
+};
+function ye({
+  children: t,
+  variant: a = "primary",
+  type: l = "button",
+  className: n,
+  ...s
+}) {
+  const c = [C.button, C[a], n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("button", { type: l, className: c, "data-variant": a, ...s, children: t });
+}
+const X = "_trigger_10bud_1", H = "_kbd_10bud_23", J = "_backdrop_10bud_31", M = "_dialog_10bud_42", W = "_input_10bud_53", Y = "_list_10bud_69", g = {
+  trigger: X,
+  kbd: H,
+  backdrop: J,
+  dialog: M,
+  input: W,
+  list: Y
+};
+function ke({
+  items: t,
+  triggerLabel: a = "Search",
+  placeholder: l = "Type a command or search…",
+  label: n = "Command palette",
+  className: s,
+  ...c
+}) {
+  const [m, i] = k(!1), [u, b] = k(""), f = D(null);
+  B(() => {
+    m && f.current?.focus();
+  }, [m]), B(() => {
+    function o(_) {
+      if ((_.metaKey || _.ctrlKey) && _.key.toLowerCase() === "k") {
+        _.preventDefault(), i((N) => !N);
+        return;
+      }
+      _.key === "Escape" && i(!1);
+    }
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, []);
+  const h = t.filter((o) => `${o.label} ${o.hint ?? ""}`.toLowerCase().includes(u.trim().toLowerCase())), v = [g.trigger, s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(E, { children: [
+    /* @__PURE__ */ r("button", { type: "button", className: v, onClick: () => i(!0), ...c, children: [
+      /* @__PURE__ */ e("span", { children: a }),
+      /* @__PURE__ */ e("kbd", { className: g.kbd, children: "⌘K" })
+    ] }),
+    m && /* @__PURE__ */ e("div", { className: g.backdrop, onClick: (o) => o.target === o.currentTarget && i(!1), children: /* @__PURE__ */ r("div", { className: g.dialog, role: "dialog", "aria-modal": "true", "aria-label": n, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: f,
+          type: "text",
+          className: g.input,
+          placeholder: l,
+          value: u,
+          onChange: (o) => b(o.target.value),
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ e("ul", { className: g.list, children: h.map((o) => (
+        // 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: o.href, onClick: () => i(!1), children: [
+          /* @__PURE__ */ e("span", { children: o.label }),
+          o.hint && /* @__PURE__ */ e("small", { children: o.hint })
+        ] }) }, o.href)
+      )) })
+    ] }) })
+  ] });
+}
+const z = "_eyebrow_1a4gy_1", ee = {
+  eyebrow: z
+};
+function ve({ children: t, className: a, ...l }) {
+  const n = [ee.eyebrow, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("p", { className: n, ...l, children: t });
+}
+const te = "_loadingLabel_1yug9_1", se = "_cursor_1yug9_10", $ = {
+  loadingLabel: te,
+  cursor: se
+};
+function Ne({
+  isLoading: t,
+  loadingText: a,
+  children: l,
+  className: n,
+  style: s,
+  disabled: c,
+  type: m = "button",
+  ...i
+}) {
+  const u = [n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: m,
+      className: u,
+      style: { ...s, ...t ? {
+        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: $.loadingLabel, children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "$" }),
+        a,
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $.cursor })
+      ] }) : l
+    }
+  );
+}
+const ae = "_panel_m16j3_1", le = {
+  panel: ae
+};
+function we({ children: t, dots: a = !1, className: l, ...n }) {
+  const s = [le.panel, a && "ds-dot-grid", l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { className: s, ...n, children: t });
+}
+const ne = "_list_27va3_1", oe = "_step_27va3_12", j = {
+  list: ne,
+  step: oe
+};
+function Be({ steps: t, className: a, ...l }) {
+  const n = [j.list, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ r("li", { className: j.step, children: [
+    s.label,
+    " ",
+    /* @__PURE__ */ e("b", { children: s.value })
+  ] }, s.label)) });
+}
+const re = "_grid_94gwu_1", ce = "_cell_94gwu_12", ie = "_value_94gwu_19", de = "_label_94gwu_28", y = {
+  grid: re,
+  cell: ce,
+  value: ie,
+  label: de
+};
+function Ce({ stats: t, className: a, ...l }) {
+  const n = [y.grid, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("dl", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ r("div", { className: y.cell, children: [
+    /* @__PURE__ */ e("dd", { className: y.value, children: s.value }),
+    /* @__PURE__ */ e("dt", { className: y.label, children: s.label })
+  ] }, s.label)) });
+}
+const ue = "_list_17qxg_1", _e = "_tag_17qxg_10", x = {
+  list: ue,
+  tag: _e
+};
+function $e({ tags: t, className: a, ...l }) {
+  const n = [x.list, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ e("li", { className: x.tag, children: s }, s)) });
+}
+const me = "_prompt_vxkw7_1", be = "_path_vxkw7_11", pe = "_cursor_vxkw7_15", w = {
+  prompt: me,
+  path: be,
+  cursor: pe
+};
+function je({ user: t, host: a, command: l, className: n, ...s }) {
+  const c = [w.prompt, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("p", { className: c, ...s, children: [
+    /* @__PURE__ */ r("span", { className: w.path, children: [
+      t,
+      "@",
+      a
+    ] }),
+    " ~$ ",
+    l,
+    /* @__PURE__ */ e("span", { className: w.cursor, "aria-hidden": "true" })
+  ] });
 }
 export {
-  m as Button
+  he as Avatar,
+  ye as Button,
+  ke as CommandPalette,
+  ve as Eyebrow,
+  Ne as LoadingButton,
+  we as Panel,
+  Be as PipelineBadges,
+  Ce as StatGrid,
+  $e as TagList,
+  je as TerminalPrompt
 };

package/package.json

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