@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/tokens.css

@@ -1,10 +1,14 @@
 /**
  * @brijbyte/agentic-ui — Design Tokens
  *
- * macOS/iOS-inspired developer-focused design system.
+ * developer-focused design system, loosely inspired by native desktop and mobile UI.
  * Monospace-first, semantic color tokens, supports light & dark modes.
  */
-@layer base {
+
+/* Establish layer order — must come before any @layer usage */
+@layer theme, base, components, utilities;
+
+@layer theme {
   :root {
     /* ─── Typography ──────────────────────────────────────────────── */
     /*
@@ -125,35 +129,35 @@
   [data-theme="light"] {
     color-scheme: light;
 
-    /* Background layers (macOS vibrancy-inspired) */
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #ffffff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: rgba(255, 255, 255, 0.92);
-    --color-bg-sidebar: rgba(246, 246, 246, 0.95);
+    /* Background layers (inspired by system vibrancy) */
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: rgba(250, 250, 250, 0.92);
+    --color-sidebar: rgba(244, 243, 244, 0.96);
 
     /* Surface (card/panel backgrounds) */
-    --color-surface-1: #ffffff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: rgba(0, 0, 0, 0.04);
-    --color-surface-active: rgba(0, 0, 0, 0.07);
-    --color-surface-selected: rgba(0, 120, 212, 0.1);
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: rgba(0, 0, 0, 0.04);
+    --color-active: rgba(0, 0, 0, 0.07);
+    --color-selected: rgba(0, 120, 212, 0.1);
 
     /* Text */
-    --color-text-primary: rgba(0, 0, 0, 0.88);
-    --color-text-secondary: rgba(0, 0, 0, 0.55);
-    --color-text-tertiary: rgba(0, 0, 0, 0.36);
-    --color-text-disabled: rgba(0, 0, 0, 0.24);
-    --color-text-inverse: rgba(255, 255, 255, 0.95);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #0f766e;
+    --color-primary: rgba(0, 0, 0, 0.88);
+    --color-secondary: rgba(0, 0, 0, 0.55);
+    --color-tertiary: rgba(0, 0, 0, 0.36);
+    --color-disabled: rgba(0, 0, 0, 0.24);
+    --color-inverse: rgba(255, 255, 255, 0.95);
+    --color-on-accent: #ffffff;
+    --color-code: #0f766e;
 
     /* Borders */
-    --color-border-base: rgba(0, 0, 0, 0.12);
-    --color-border-strong: rgba(0, 0, 0, 0.22);
-    --color-border-subtle: rgba(0, 0, 0, 0.06);
-    --color-border-focus: var(--color-focus-ring);
+    --color-line: rgba(0, 0, 0, 0.12);
+    --color-line-strong: rgba(0, 0, 0, 0.22);
+    --color-line-subtle: rgba(0, 0, 0, 0.06);
+    --color-line-focus: var(--color-focus-ring);
 
     /* Accent — macOS blue
      * Semantic names instead of opaque Radix-style numbers:
@@ -181,7 +185,7 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.1);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.12);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.08);
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
     /* Status — Success */
     --color-success-bg: #f0fdf4;
@@ -208,7 +212,7 @@
     --color-info-solid: #2563eb;
 
     /* Code / terminal palette */
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
@@ -217,8 +221,8 @@
     --color-code-function: #8250df;
 
     /* Scrollbar */
-    --color-scrollbar-thumb: rgba(0, 0, 0, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(0, 0, 0, 0.2);
+    --color-track: transparent;
   }
 
   /* ═══════════════════════════════════════════════════════════════════
@@ -232,33 +236,33 @@
       color-scheme: dark;
 
       /* Background */
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: rgba(30, 30, 32, 0.92);
-      --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: rgba(30, 30, 32, 0.92);
+      --color-sidebar: rgba(28, 28, 30, 0.95);
 
       /* Surface */
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: rgba(255, 255, 255, 0.06);
-      --color-surface-active: rgba(255, 255, 255, 0.1);
-      --color-surface-selected: rgba(10, 132, 255, 0.16);
+      --color-hover: rgba(255, 255, 255, 0.06);
+      --color-active: rgba(255, 255, 255, 0.1);
+      --color-selected: rgba(10, 132, 255, 0.16);
 
       /* Text */
-      --color-text-primary: rgba(255, 255, 255, 0.92);
-      --color-text-secondary: rgba(255, 255, 255, 0.55);
-      --color-text-tertiary: rgba(255, 255, 255, 0.36);
-      --color-text-disabled: rgba(255, 255, 255, 0.24);
-      --color-text-inverse: rgba(0, 0, 0, 0.88);
-      --color-text-on-accent: #ffffff;
-      --color-text-code: #2dd4bf;
+      --color-primary: rgba(255, 255, 255, 0.92);
+      --color-secondary: rgba(255, 255, 255, 0.55);
+      --color-tertiary: rgba(255, 255, 255, 0.36);
+      --color-disabled: rgba(255, 255, 255, 0.24);
+      --color-inverse: rgba(0, 0, 0, 0.88);
+      --color-on-accent: #ffffff;
+      --color-code: #2dd4bf;
 
       /* Borders */
-      --color-border-base: rgba(255, 255, 255, 0.12);
-      --color-border-strong: rgba(255, 255, 255, 0.22);
-      --color-border-subtle: rgba(255, 255, 255, 0.06);
+      --color-line: rgba(255, 255, 255, 0.12);
+      --color-line-strong: rgba(255, 255, 255, 0.22);
+      --color-line-subtle: rgba(255, 255, 255, 0.06);
 
       /* Accent — macOS blue dark */
       --color-accent: #0a84ff;
@@ -279,7 +283,7 @@
       --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
       --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
       --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
       /* Status — Success */
       --color-success-bg: rgba(22, 163, 74, 0.12);
@@ -306,7 +310,7 @@
       --color-info-solid: #3b82f6;
 
       /* Code / terminal palette */
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: rgba(255, 255, 255, 0.1);
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
@@ -315,38 +319,38 @@
       --color-code-function: #d2a8ff;
 
       /* Scrollbar */
-      --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-      --color-scrollbar-track: transparent;
+      --color-thumb: rgba(255, 255, 255, 0.2);
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
 
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: rgba(30, 30, 32, 0.92);
-    --color-bg-sidebar: rgba(28, 28, 30, 0.95);
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: rgba(30, 30, 32, 0.92);
+    --color-sidebar: rgba(28, 28, 30, 0.95);
 
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: rgba(255, 255, 255, 0.06);
-    --color-surface-active: rgba(255, 255, 255, 0.1);
-    --color-surface-selected: rgba(10, 132, 255, 0.16);
-
-    --color-text-primary: rgba(255, 255, 255, 0.92);
-    --color-text-secondary: rgba(255, 255, 255, 0.55);
-    --color-text-tertiary: rgba(255, 255, 255, 0.36);
-    --color-text-disabled: rgba(255, 255, 255, 0.24);
-    --color-text-inverse: rgba(0, 0, 0, 0.88);
-    --color-text-on-accent: #ffffff;
-    --color-text-code: #2dd4bf;
-
-    --color-border-base: rgba(255, 255, 255, 0.12);
-    --color-border-strong: rgba(255, 255, 255, 0.22);
-    --color-border-subtle: rgba(255, 255, 255, 0.06);
+    --color-hover: rgba(255, 255, 255, 0.06);
+    --color-active: rgba(255, 255, 255, 0.1);
+    --color-selected: rgba(10, 132, 255, 0.16);
+
+    --color-primary: rgba(255, 255, 255, 0.92);
+    --color-secondary: rgba(255, 255, 255, 0.55);
+    --color-tertiary: rgba(255, 255, 255, 0.36);
+    --color-disabled: rgba(255, 255, 255, 0.24);
+    --color-inverse: rgba(0, 0, 0, 0.88);
+    --color-on-accent: #ffffff;
+    --color-code: #2dd4bf;
+
+    --color-line: rgba(255, 255, 255, 0.12);
+    --color-line-strong: rgba(255, 255, 255, 0.22);
+    --color-line-subtle: rgba(255, 255, 255, 0.06);
 
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
@@ -364,7 +368,7 @@
     --shadow-popover: 0 8px 24px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
     --shadow-sheet: 0 -4px 16px 0 rgb(0 0 0 / 0.4);
     --shadow-inset: inset 0 1px 2px 0 rgb(0 0 0 / 0.3);
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
 
     --color-success-bg: rgba(22, 163, 74, 0.12);
     --color-success-border: rgba(22, 163, 74, 0.3);
@@ -386,7 +390,7 @@
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
 
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: rgba(255, 255, 255, 0.1);
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
@@ -394,7 +398,7 @@
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
 
-    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);
-    --color-scrollbar-track: transparent;
+    --color-thumb: rgba(255, 255, 255, 0.2);
+    --color-track: transparent;
   }
 }

package/dist/tooltip/tooltip.css

@@ -1,5 +1,3 @@
-@layer theme, base;
-
 @layer components {
   .positioner_yQZxSq {
     z-index: var(--z-tooltip);
@@ -7,19 +5,19 @@
 
   .popup_yQZxSq {
     background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-sm);
     padding: var(--space-1) var(--space-2);
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     line-height: var(--line-height-normal);
     word-break: break-word;
     max-width: 240px;
     transform-origin: var(--transform-origin);
-    transition: opacity .125s var(--easing-ease-out),
-      transform .125s var(--easing-ease-out);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
   }
 
   .popup_yQZxSq[data-instant] {
@@ -28,14 +26,14 @@
 
   .popup_yQZxSq[data-starting-style] {
     opacity: 0;
-    transform: scale(.96);
+    transform: scale(.85);
   }
 
   .popup_yQZxSq[data-ending-style] {
     opacity: 0;
     transition: opacity 75ms var(--easing-ease-in),
       transform 75ms var(--easing-ease-in);
-    transform: scale(.98);
+    transform: scale(.95);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -56,9 +54,7 @@
     width: 8px;
     height: 8px;
     fill: var(--color-surface-3);
-    stroke: var(--color-border-base);
+    stroke: var(--color-line);
     stroke-width: 1px;
   }
 }
-
-@layer utilities;

package/dist/tooltip/tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../src/tooltip/tooltip.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n  .positioner {\n    z-index: var(--z-tooltip);\n  }\n\n  .popup {\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-border-base);\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-sm);\n    padding: var(--space-1) var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-text-primary);\n    line-height: var(--line-height-normal);\n    max-width: 240px;\n    word-break: break-word;\n\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 125ms var(--easing-ease-out),\n      transform 125ms var(--easing-ease-out);\n  }\n\n  /* Skip animation when moving between tooltips quickly */\n  .popup[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popup {\n      transition: opacity 125ms var(--easing-ease-out);\n    }\n\n    .popup[data-ending-style] {\n      transition: opacity 75ms var(--easing-ease-in);\n    }\n\n    .popup[data-starting-style],\n    .popup[data-ending-style] {\n      transform: none;\n    }\n  }\n\n  .arrow {\n    width: 8px;\n    height: 8px;\n    fill: var(--color-surface-3);\n    stroke: var(--color-border-base);\n    stroke-width: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../src/tooltip/tooltip.module.css"],"sourcesContent":["@layer components {\n  .positioner {\n    z-index: var(--z-tooltip);\n  }\n  .popup {\n    background-color: var(--color-surface-3);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-sm);\n    box-shadow: var(--shadow-sm);\n    padding: var(--space-1) var(--space-2);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n    max-width: 240px;\n    word-break: break-word;\n    transform-origin: var(--transform-origin);\n    transition:\n      opacity 150ms var(--easing-ease-out),\n      transform 300ms var(--easing-spring);\n  }\n  /* Skip animation when moving between tooltips quickly */\n  .popup[data-instant] {\n    transition-duration: 0ms;\n  }\n  .popup[data-starting-style] {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  .popup[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.95);\n    transition:\n      opacity 75ms var(--easing-ease-in),\n      transform 75ms var(--easing-ease-in);\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .popup {\n      transition: opacity 125ms var(--easing-ease-out);\n    }\n    .popup[data-ending-style] {\n      transition: opacity 75ms var(--easing-ease-in);\n    }\n    .popup[data-starting-style],\n    .popup[data-ending-style] {\n      transform: none;\n    }\n  }\n  .arrow {\n    width: 8px;\n    height: 8px;\n    fill: var(--color-surface-3);\n    stroke: var(--color-line);\n    stroke-width: 1;\n  }\n}\n"],"mappings":";AAMA,IAAA,yBAAe;CAAC,SAAQ;CAAa,SAAU;CAAa,cAAA;CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brijbyte/agentic-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "repository": {
     "type": "git",
@@ -24,13 +24,24 @@
       "types": "./dist/index.d.ts"
     },
     "./styles": "./dist/index.css",
+    "./layer-order": "./dist/layer-order.css",
     "./tokens": "./dist/tokens.css",
     "./reset": "./dist/reset.css",
     "./tailwind-theme": "./dist/tailwind-theme.css",
+    "./alert-dialog": {
+      "import": "./dist/alert-dialog/index.js",
+      "types": "./dist/alert-dialog/index.d.ts"
+    },
+    "./context-menu": {
+      "import": "./dist/context-menu/index.js",
+      "types": "./dist/context-menu/index.d.ts"
+    },
     "./accordion": {
       "import": "./dist/accordion/index.js",
       "types": "./dist/accordion/index.d.ts"
     },
+    "./alert-dialog.css": "./dist/alert-dialog/alert-dialog.css",
+    "./context-menu.css": "./dist/context-menu/context-menu.css",
     "./accordion.css": "./dist/accordion/accordion.css",
     "./badge": {
       "import": "./dist/badge/index.js",
@@ -96,7 +107,12 @@
       "import": "./dist/separator/index.js",
       "types": "./dist/separator/index.d.ts"
     },
+    "./slider": {
+      "import": "./dist/slider/index.js",
+      "types": "./dist/slider/index.d.ts"
+    },
     "./separator.css": "./dist/separator/separator.css",
+    "./slider.css": "./dist/slider/slider.css",
     "./switch": {
       "import": "./dist/switch/index.js",
       "types": "./dist/switch/index.d.ts"

package/src/accordion/accordion.module.css

@@ -1,28 +1,22 @@
-@layer theme, base, components, utilities;
-
 @layer components {
   .root {
     display: flex;
     flex-direction: column;
     gap: 0;
-    border: var(--border-width-base) solid var(--color-border-base);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
-
   .item {
-    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
   }
-
   .item:last-child {
     border-bottom: none;
   }
-
   .header {
     display: flex;
     align-items: center;
   }
-
   .trigger {
     flex: 1;
     display: flex;
@@ -33,7 +27,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     background: none;
     border: none;
     cursor: pointer;
@@ -44,46 +38,38 @@
       color var(--duration-fast) var(--easing-standard);
     user-select: none;
   }
-
   .trigger:hover {
-    background-color: var(--color-surface-hover);
+    background-color: var(--color-hover);
   }
-
   .trigger:focus-visible {
     box-shadow: inset var(--shadow-focus);
   }
-
   .trigger[data-disabled] {
     opacity: 0.44;
     cursor: not-allowed;
   }
-
   .trigger-icon {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
     transition: transform var(--duration-normal) var(--easing-standard);
   }
-
   .trigger[data-panel-open] .trigger-icon {
     transform: rotate(180deg);
   }
-
   .panel {
     height: var(--accordion-panel-height);
     overflow: hidden;
     transition: height var(--duration-normal) var(--easing-standard);
   }
-
   .panel[data-starting-style],
   .panel[data-ending-style] {
     height: 0;
   }
-
   .panel-content {
     padding: var(--space-2) var(--space-4) var(--space-4);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 }

package/src/alert-dialog/alert-dialog.module.css

@@ -0,0 +1,91 @@
+@layer components {
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    min-height: 100dvh;
+    background-color: rgba(0, 0, 0, 0.48);
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
+
+  .backdrop[data-starting-style],
+  .backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  .popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(380px, calc(100vw - var(--space-8)));
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    transition:
+      opacity 200ms var(--easing-ease-out),
+      transform 200ms var(--easing-spring);
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.98);
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+
+  /* ─── Header ──────────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+  }
+
+  .icon {
+    margin-bottom: var(--space-1);
+  }
+
+  .title {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+  }
+
+  .description {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  /* ─── Actions ─────────────────────────────────────────────────── */
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+  }
+}

package/src/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode, ReactElement } from "react";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Button } from "../button/button";
+import styles from "./alert-dialog.module.css";
+
+export interface AlertAction {
+  label: ReactNode;
+  /** Called when the action button is clicked. The dialog closes automatically. */
+  onAction?: () => void;
+  /** Renders as a filled accent button — use for the primary confirm action. */
+  primary?: boolean;
+  /** Renders as a soft destructive button. Sits on the left when combined with other actions. */
+  destructive?: boolean;
+}
+
+export interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+  trigger?: ReactElement;
+  /** Optional icon shown above the title. */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /**
+   * Action buttons rendered right-aligned.
+   * Use `primary: true` for the confirm action (solid), leave unset for cancel (outline).
+   * Use `destructive: true` to apply destructive tone to the confirm action.
+   */
+  actions: AlertAction[];
+  className?: string;
+}
+
+export function AlertDialog({ trigger, icon, title, description, actions, className, onOpenChange, ...props }: AlertDialogProps) {
+  return (
+    <BaseAlertDialog.Root onOpenChange={onOpenChange as never} {...props}>
+      {trigger && <BaseAlertDialog.Trigger render={trigger} />}
+      <BaseAlertDialog.Portal>
+        <BaseAlertDialog.Backdrop className={styles.backdrop} />
+        <BaseAlertDialog.Popup className={`${styles.popup} ${className ?? ""}`}>
+          <div className={styles.header}>
+            {icon && <div className={styles.icon}>{icon}</div>}
+            <BaseAlertDialog.Title className={styles.title}>{title}</BaseAlertDialog.Title>
+            {description && <BaseAlertDialog.Description className={styles.description}>{description}</BaseAlertDialog.Description>}
+          </div>
+          <div className={styles.actions}>
+            {actions.map((action, i) => (
+              <BaseAlertDialog.Close
+                key={i}
+                render={
+                  <Button
+                    variant={action.primary ? "solid" : "outline"}
+                    tone={action.destructive ? "destructive" : "primary"}
+                    size="sm"
+                    onClick={action.onAction}
+                  />
+                }
+              >
+                {action.label}
+              </BaseAlertDialog.Close>
+            ))}
+          </div>
+        </BaseAlertDialog.Popup>
+      </BaseAlertDialog.Portal>
+    </BaseAlertDialog.Root>
+  );
+}
+
+export { styles as AlertDialogStyles };

package/src/alert-dialog/index.ts

@@ -0,0 +1,7 @@
+export { AlertDialog } from "./alert-dialog";
+export type { AlertDialogProps, AlertAction } from "./alert-dialog";
+
+export { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from "./parts";
+export type { AlertDialogBackdropProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps } from "./parts";
+
+export { AlertDialogStyles } from "./alert-dialog";