@alishenriques/design-system 0.4.2 → 0.5.0

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

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

package/package.json

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