@alishenriques/design-system 0.2.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/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/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}._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)}._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}}
+: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,9 +1,13 @@
+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';

package/dist/index.js

@@ -1,152 +1,282 @@
 "use client";
-import { jsx as e, jsxs as r, Fragment as $ } from "react/jsx-runtime";
-import { useState as f, useRef as B, useEffect as g } from "react";
-const x = "_button_1jhtl_1", L = "_primary_1jhtl_33", E = "_ghost_1jhtl_43", y = {
-  button: x,
-  primary: L,
-  ghost: E
+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, 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 te({
-  children: n,
-  variant: s = "primary",
-  type: a = "button",
-  className: o,
-  ...t
+function ye({
+  children: t,
+  variant: a = "primary",
+  type: l = "button",
+  className: n,
+  ...s
 }) {
-  const u = [y.button, y[s], o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("button", { type: a, className: u, "data-variant": s, ...t, children: n });
+  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 K = "_trigger_10bud_1", P = "_kbd_10bud_23", T = "_backdrop_10bud_31", q = "_dialog_10bud_42", S = "_input_10bud_53", D = "_list_10bud_69", i = {
-  trigger: K,
-  kbd: P,
-  backdrop: T,
-  dialog: q,
-  input: S,
-  list: D
+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 se({
-  items: n,
-  triggerLabel: s = "Search",
-  placeholder: a = "Type a command or search…",
-  label: o = "Command palette",
-  className: t,
-  ...u
+function ke({
+  items: t,
+  triggerLabel: a = "Search",
+  placeholder: l = "Type a command or search…",
+  label: n = "Command palette",
+  className: s,
+  ...c
 }) {
-  const [p, d] = f(!1), [h, w] = f(""), b = B(null);
-  g(() => {
-    p && b.current?.focus();
-  }, [p]), g(() => {
-    function l(c) {
-      if ((c.metaKey || c.ctrlKey) && c.key.toLowerCase() === "k") {
-        c.preventDefault(), d((C) => !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;
       }
-      c.key === "Escape" && d(!1);
+      _.key === "Escape" && i(!1);
     }
-    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
   }, []);
-  const v = n.filter((l) => `${l.label} ${l.hint ?? ""}`.toLowerCase().includes(h.trim().toLowerCase())), j = [i.trigger, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r($, { children: [
-    /* @__PURE__ */ r("button", { type: "button", className: j, onClick: () => d(!0), ...u, children: [
-      /* @__PURE__ */ e("span", { children: s }),
-      /* @__PURE__ */ e("kbd", { className: i.kbd, children: "⌘K" })
+  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" })
     ] }),
-    p && /* @__PURE__ */ e("div", { className: i.backdrop, onClick: (l) => l.target === l.currentTarget && d(!1), children: /* @__PURE__ */ r("div", { className: i.dialog, role: "dialog", "aria-modal": "true", "aria-label": o, children: [
+    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: b,
+          ref: f,
           type: "text",
-          className: i.input,
-          placeholder: a,
-          value: h,
-          onChange: (l) => w(l.target.value),
+          className: g.input,
+          placeholder: l,
+          value: u,
+          onChange: (o) => b(o.target.value),
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ e("ul", { className: i.list, children: v.map((l) => (
+      /* @__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: 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: o.href, onClick: () => i(!1), children: [
+          /* @__PURE__ */ e("span", { children: o.label }),
+          o.hint && /* @__PURE__ */ e("small", { children: o.hint })
+        ] }) }, o.href)
       )) })
     ] }) })
   ] });
 }
-const R = "_eyebrow_1a4gy_1", F = {
-  eyebrow: R
+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 le({ children: n, className: s, ...a }) {
-  const o = [F.eyebrow, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("p", { className: o, ...a, children: n });
+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 G = "_panel_m16j3_1", O = {
-  panel: G
+const ae = "_panel_m16j3_1", le = {
+  panel: ae
 };
-function ne({ children: n, dots: s = !1, className: a, ...o }) {
-  const t = [O.panel, s && "ds-dot-grid", a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { className: t, ...o, children: n });
+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 Q = "_list_27va3_1", z = "_step_27va3_12", k = {
-  list: Q,
-  step: z
+const ne = "_list_27va3_1", oe = "_step_27va3_12", j = {
+  list: ne,
+  step: oe
 };
-function ae({ steps: n, className: s, ...a }) {
-  const o = [k.list, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: o, ...a, children: n.map((t) => /* @__PURE__ */ r("li", { className: k.step, children: [
-    t.label,
+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: t.value })
-  ] }, t.label)) });
+    /* @__PURE__ */ e("b", { children: s.value })
+  ] }, s.label)) });
 }
-const A = "_grid_94gwu_1", H = "_cell_94gwu_12", I = "_value_94gwu_19", J = "_label_94gwu_28", _ = {
-  grid: A,
-  cell: H,
-  value: I,
-  label: J
+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 oe({ stats: n, className: s, ...a }) {
-  const o = [_.grid, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("dl", { className: o, ...a, children: n.map((t) => /* @__PURE__ */ r("div", { className: _.cell, children: [
-    /* @__PURE__ */ e("dd", { className: _.value, children: t.value }),
-    /* @__PURE__ */ e("dt", { className: _.label, children: t.label })
-  ] }, t.label)) });
+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 M = "_list_17qxg_1", U = "_tag_17qxg_10", N = {
-  list: M,
-  tag: U
+const ue = "_list_17qxg_1", _e = "_tag_17qxg_10", x = {
+  list: ue,
+  tag: _e
 };
-function re({ tags: n, className: s, ...a }) {
-  const o = [N.list, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: o, ...a, children: n.map((t) => /* @__PURE__ */ e("li", { className: N.tag, children: t }, t)) });
+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 V = "_prompt_vxkw7_1", W = "_path_vxkw7_11", X = "_cursor_vxkw7_15", m = {
-  prompt: V,
-  path: W,
-  cursor: X
+const me = "_prompt_vxkw7_1", be = "_path_vxkw7_11", pe = "_cursor_vxkw7_15", w = {
+  prompt: me,
+  path: be,
+  cursor: pe
 };
-function ce({ user: n, host: s, command: a, className: o, ...t }) {
-  const u = [m.prompt, o].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("p", { className: u, ...t, children: [
-    /* @__PURE__ */ r("span", { className: m.path, children: [
-      n,
+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,
       "@",
-      s
+      a
     ] }),
     " ~$ ",
-    a,
-    /* @__PURE__ */ e("span", { className: m.cursor, "aria-hidden": "true" })
+    l,
+    /* @__PURE__ */ e("span", { className: w.cursor, "aria-hidden": "true" })
   ] });
 }
 export {
-  te as Button,
-  se as CommandPalette,
-  le as Eyebrow,
-  ne as Panel,
-  ae as PipelineBadges,
-  oe as StatGrid,
-  re as TagList,
-  ce as TerminalPrompt
+  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.2.0",
+  "version": "0.3.0",
   "description": "Isolated design system for Alis portfolio and future products",
   "type": "module",
   "main": "./dist/index.js",