@alishenriques/design-system 0.1.0 → 0.2.0

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/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}._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}}

package/dist/index.d.ts

@@ -1,2 +1,16 @@
 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 { 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,152 @@
-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
+"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
 };
-function m({
+function te({
   children: n,
-  variant: t = "primary",
-  type: s = "button",
-  className: r,
-  ...a
+  variant: s = "primary",
+  type: a = "button",
+  className: o,
+  ...t
 }) {
-  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 = [y.button, y[s], o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("button", { type: a, className: u, "data-variant": s, ...t, children: n });
+}
+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
+};
+function se({
+  items: n,
+  triggerLabel: s = "Search",
+  placeholder: a = "Type a command or search…",
+  label: o = "Command palette",
+  className: t,
+  ...u
+}) {
+  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);
+        return;
+      }
+      c.key === "Escape" && d(!1);
+    }
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, []);
+  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" })
+    ] }),
+    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: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: b,
+          type: "text",
+          className: i.input,
+          placeholder: a,
+          value: h,
+          onChange: (l) => w(l.target.value),
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ e("ul", { className: i.list, children: v.map((l) => (
+        // 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)
+      )) })
+    ] }) })
+  ] });
+}
+const R = "_eyebrow_1a4gy_1", F = {
+  eyebrow: R
+};
+function le({ children: n, className: s, ...a }) {
+  const o = [F.eyebrow, s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("p", { className: o, ...a, children: n });
+}
+const G = "_panel_m16j3_1", O = {
+  panel: G
+};
+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 });
+}
+const Q = "_list_27va3_1", z = "_step_27va3_12", k = {
+  list: Q,
+  step: z
+};
+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,
+    " ",
+    /* @__PURE__ */ e("b", { children: t.value })
+  ] }, t.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
+};
+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)) });
+}
+const M = "_list_17qxg_1", U = "_tag_17qxg_10", N = {
+  list: M,
+  tag: U
+};
+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)) });
+}
+const V = "_prompt_vxkw7_1", W = "_path_vxkw7_11", X = "_cursor_vxkw7_15", m = {
+  prompt: V,
+  path: W,
+  cursor: X
+};
+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,
+      "@",
+      s
+    ] }),
+    " ~$ ",
+    a,
+    /* @__PURE__ */ e("span", { className: m.cursor, "aria-hidden": "true" })
+  ] });
 }
 export {
-  m as Button
+  te as Button,
+  se as CommandPalette,
+  le as Eyebrow,
+  ne as Panel,
+  ae as PipelineBadges,
+  oe as StatGrid,
+  re as TagList,
+  ce as TerminalPrompt
 };

package/package.json

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