@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/tokens.css

@@ -0,0 +1,404 @@
+/**
+ * @brijbyte/agentic-ui — Design Tokens
+ *
+ * developer-focused design system, loosely inspired by native desktop and mobile UI.
+ * Monospace-first, semantic color tokens, supports light & dark modes.
+ */
+
+/* Establish layer order — must come before any @layer usage */
+@layer theme, base, components, utilities;
+
+@layer theme {
+  :root {
+    /* ─── Typography ──────────────────────────────────────────────── */
+    /*
+     * Display / headline font — Apple "New York" serif (macOS Catalina+).
+     * Falls back to classic readable serifs. Used for page titles and headings.
+     */
+    --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
+
+    /*
+     * Mono / UI font — developer-focused monospace stack.
+     * Used for all UI chrome: buttons, inputs, labels, badges, code.
+     */
+    --font-mono:
+      "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
+
+    /*
+     * Sans — system sans-serif for body prose and long descriptions.
+     */
+    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+
+    --font-size-2xs: 0.625rem; /* 10px */
+    --font-size-xs: 0.6875rem; /* 11px */
+    --font-size-sm: 0.75rem; /* 12px */
+    --font-size-md: 0.8125rem; /* 13px — macOS default */
+    --font-size-lg: 0.875rem; /* 14px */
+    --font-size-xl: 1rem; /* 16px */
+    --font-size-2xl: 1.125rem; /* 18px */
+    --font-size-3xl: 1.25rem; /* 20px */
+    --font-size-4xl: 1.5rem; /* 24px */
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.4;
+    --line-height-relaxed: 1.6;
+
+    --letter-spacing-tight: -0.02em;
+    --letter-spacing-normal: 0em;
+    --letter-spacing-wide: 0.04em;
+    --letter-spacing-wider: 0.08em;
+
+    /* ─── Spacing (4px grid) ──────────────────────────────────────── */
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 2px;
+    --space-1: 4px;
+    --space-1-5: 6px;
+    --space-2: 8px;
+    --space-2-5: 10px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-12: 48px;
+    --space-16: 64px;
+    --space-20: 80px;
+    --space-24: 96px;
+
+    /* ─── Border Radius ───────────────────────────────────────────── */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-2xl: 12px;
+    --radius-full: 9999px;
+
+    /* ─── Border Width ────────────────────────────────────────────── */
+    --border-width-base: 1px;
+    --border-width-medium: 1.5px;
+    --border-width-thick: 2px;
+
+    /* ─── Animation ───────────────────────────────────────────────── */
+    --duration-instant: 0ms;
+    --duration-fast: 100ms;
+    --duration-normal: 150ms;
+    --duration-slow: 200ms;
+    --duration-slower: 300ms;
+
+    /*
+     * Easing curves — use the right one for the job:
+     *   ease-out   → entering elements (starts fast, feels responsive)
+     *   ease-in    → exiting elements (builds speed, disappears cleanly)
+     *   standard   → on-screen movement / morphing between states (ease-in-out)
+     *   spring     → playful or physics-based interactions
+     *   linear     → constant motion (spinners, progress bars, marquees)
+     */
+    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --easing-linear: linear;
+
+    /* ─── Z-index Scale ───────────────────────────────────────────── */
+    --z-below: -1;
+    --z-base: 0;
+    --z-raised: 10;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-overlay: 300;
+    --z-modal: 400;
+    --z-popover: 500;
+    --z-toast: 600;
+    --z-tooltip: 700;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     LIGHT MODE — semantic tokens
+  ═══════════════════════════════════════════════════════════════════ */
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+
+    /* 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: #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-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-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:
+     *   tint        → subtle background fill (badges, chips)
+     *   tint-hover  → tint on hover
+     *   (base)      → solid interactive color (buttons, links)
+     *   hover       → solid on hover
+     *   pressed     → solid on press
+     */
+    --color-accent: #0078d4;
+    --color-accent-hover: #006bbf;
+    --color-accent-pressed: #005ea8;
+    --color-accent-tint: rgba(0, 120, 212, 0.1);
+    --color-accent-tint-hover: rgba(0, 120, 212, 0.16);
+
+    /* Focus ring */
+    --color-focus-ring: rgba(0, 120, 212, 0.8);
+
+    /* Elevation / Shadows — light (subtle black shadows) */
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
+    --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-canvas), 0 0 0 4px var(--color-focus-ring);
+
+    /* Status — Success */
+    --color-success-bg: #f0fdf4;
+    --color-success-border: #bbf7d0;
+    --color-success-text: #15803d;
+    --color-success-solid: #16a34a;
+
+    /* Status — Warning */
+    --color-warning-bg: #fffbeb;
+    --color-warning-border: #fde68a;
+    --color-warning-text: #92400e;
+    --color-warning-solid: #d97706;
+
+    /* Status — Error */
+    --color-error-bg: #fef2f2;
+    --color-error-border: #fecaca;
+    --color-error-text: #991b1b;
+    --color-error-solid: #dc2626;
+
+    /* Status — Info */
+    --color-info-bg: #eff6ff;
+    --color-info-border: #bfdbfe;
+    --color-info-text: #1d4ed8;
+    --color-info-solid: #2563eb;
+
+    /* Code / terminal palette */
+    --color-code-canvas: #f6f8fa;
+    --color-code-border: #d0d7de;
+    --color-code-comment: #6e7781;
+    --color-code-keyword: #cf222e;
+    --color-code-string: #0a3069;
+    --color-code-number: #0550ae;
+    --color-code-function: #8250df;
+
+    /* Scrollbar */
+    --color-thumb: rgba(0, 0, 0, 0.2);
+    --color-track: transparent;
+  }
+
+  /* ═══════════════════════════════════════════════════════════════════
+     DARK MODE — single source of truth via :where()
+     Both the media query and [data-theme="dark"] point to the same
+     selector block — no duplication, no drift.
+  ═══════════════════════════════════════════════════════════════════ */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]),
+    :root:not([data-theme="light"]) [data-theme="dark"] {
+      color-scheme: dark;
+
+      /* Background */
+      --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-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-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-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;
+      --color-accent-hover: #0071e3;
+      --color-accent-pressed: #005bb5;
+      --color-accent-tint: rgba(10, 132, 255, 0.12);
+      --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+      /* Focus ring */
+      --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+      /* Elevation / Shadows — dark (higher opacity so they read on dark surfaces) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+      --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-canvas), 0 0 0 4px var(--color-focus-ring);
+
+      /* Status — Success */
+      --color-success-bg: rgba(22, 163, 74, 0.12);
+      --color-success-border: rgba(22, 163, 74, 0.3);
+      --color-success-text: #4ade80;
+      --color-success-solid: #22c55e;
+
+      /* Status — Warning */
+      --color-warning-bg: rgba(217, 119, 6, 0.12);
+      --color-warning-border: rgba(217, 119, 6, 0.3);
+      --color-warning-text: #fbbf24;
+      --color-warning-solid: #f59e0b;
+
+      /* Status — Error */
+      --color-error-bg: rgba(220, 38, 38, 0.12);
+      --color-error-border: rgba(220, 38, 38, 0.3);
+      --color-error-text: #f87171;
+      --color-error-solid: #ef4444;
+
+      /* Status — Info */
+      --color-info-bg: rgba(37, 99, 235, 0.12);
+      --color-info-border: rgba(37, 99, 235, 0.3);
+      --color-info-text: #60a5fa;
+      --color-info-solid: #3b82f6;
+
+      /* Code / terminal palette */
+      --color-code-canvas: #161b22;
+      --color-code-border: rgba(255, 255, 255, 0.1);
+      --color-code-comment: #8b949e;
+      --color-code-keyword: #ff7b72;
+      --color-code-string: #a5d6ff;
+      --color-code-number: #79c0ff;
+      --color-code-function: #d2a8ff;
+
+      /* Scrollbar */
+      --color-thumb: rgba(255, 255, 255, 0.2);
+      --color-track: transparent;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    --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-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;
+    --color-accent-pressed: #005bb5;
+    --color-accent-tint: rgba(10, 132, 255, 0.12);
+    --color-accent-tint-hover: rgba(10, 132, 255, 0.2);
+
+    --color-focus-ring: rgba(10, 132, 255, 0.9);
+
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+    --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-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);
+    --color-success-text: #4ade80;
+    --color-success-solid: #22c55e;
+
+    --color-warning-bg: rgba(217, 119, 6, 0.12);
+    --color-warning-border: rgba(217, 119, 6, 0.3);
+    --color-warning-text: #fbbf24;
+    --color-warning-solid: #f59e0b;
+
+    --color-error-bg: rgba(220, 38, 38, 0.12);
+    --color-error-border: rgba(220, 38, 38, 0.3);
+    --color-error-text: #f87171;
+    --color-error-solid: #ef4444;
+
+    --color-info-bg: rgba(37, 99, 235, 0.12);
+    --color-info-border: rgba(37, 99, 235, 0.3);
+    --color-info-text: #60a5fa;
+    --color-info-solid: #3b82f6;
+
+    --color-code-canvas: #161b22;
+    --color-code-border: rgba(255, 255, 255, 0.1);
+    --color-code-comment: #8b949e;
+    --color-code-keyword: #ff7b72;
+    --color-code-string: #a5d6ff;
+    --color-code-number: #79c0ff;
+    --color-code-function: #d2a8ff;
+
+    --color-thumb: rgba(255, 255, 255, 0.2);
+    --color-track: transparent;
+  }
+}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import { Tooltip, TooltipProps, styles } from "./tooltip.js";
+import { TooltipArrow, TooltipArrowProps, TooltipPopup, TooltipPopupProps, TooltipPositioner, TooltipPositionerProps } from "./parts.js";
+export { Tooltip, TooltipArrow, type TooltipArrowProps, TooltipPopup, type TooltipPopupProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, styles as TooltipStyles };

package/dist/tooltip/index.js

@@ -0,0 +1,4 @@
+import tooltip_module_default from "./tooltip.module.js";
+import { Tooltip } from "./tooltip.js";
+import { TooltipArrow, TooltipPopup, TooltipPositioner } from "./parts.js";
+export { Tooltip, TooltipArrow, TooltipPopup, TooltipPositioner, tooltip_module_default as TooltipStyles };

package/dist/tooltip/parts.d.ts

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+
+//#region src/tooltip/parts.d.ts
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Tooltip.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof Tooltip.Popup>;
+type BaseArrowProps = ComponentPropsWithoutRef<typeof Tooltip.Arrow>;
+interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
+  className?: string;
+}
+declare const TooltipPositioner: react.ForwardRefExoticComponent<TooltipPositionerProps & react.RefAttributes<HTMLDivElement>>;
+declare const TooltipPopup: react.ForwardRefExoticComponent<TooltipPopupProps & react.RefAttributes<HTMLDivElement>>;
+declare const TooltipArrow: react.ForwardRefExoticComponent<TooltipArrowProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TooltipArrow, TooltipArrowProps, TooltipPopup, TooltipPopupProps, TooltipPositioner, TooltipPositionerProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/tooltip/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/tooltip/parts.tsx"],"mappings":";;;;;KA4BK,mBAAA,GAAsB,wBAAA,QAAgC,OAAA,CAAY,UAAA;AAAA,KAClE,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,KAC7D,cAAA,GAAiB,wBAAA,QAAgC,OAAA,CAAY,KAAA;AAAA,UAEjD,sBAAA,SAA+B,IAAA,CAAK,mBAAA;EACnD,SAAA;AAAA;AAAA,UAEe,iBAAA,SAA0B,IAAA,CAAK,cAAA;EAC9C,SAAA;AAAA;AAAA,UAEe,iBAAA,SAA0B,IAAA,CAAK,cAAA;EAC9C,SAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOjB,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOZ,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/tooltip/parts.js

@@ -0,0 +1,53 @@
+import tooltip_module_default from "./tooltip.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/tooltip/parts.tsx
+/**
+* Styled primitives for Tooltip.
+*
+* @example
+* ```tsx
+* import { Tooltip } from '@base-ui/react/tooltip';
+* import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';
+*
+* <Tooltip.Provider>
+*   <Tooltip.Root>
+*     <Tooltip.Trigger render={<button>Hover me</button>} />
+*     <Tooltip.Portal>
+*       <TooltipPositioner side="top" sideOffset={6}>
+*         <TooltipPopup>
+*           <TooltipArrow />
+*           Tooltip content
+*         </TooltipPopup>
+*       </TooltipPositioner>
+*     </Tooltip.Portal>
+*   </Tooltip.Root>
+* </Tooltip.Provider>
+* ```
+*/
+const TooltipPositioner = forwardRef(function TooltipPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		ref,
+		className: `${tooltip_module_default.positioner} ${className ?? ""}`,
+		...props
+	});
+});
+const TooltipPopup = forwardRef(function TooltipPopup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Popup, {
+		ref,
+		className: `${tooltip_module_default.popup} ${className ?? ""}`,
+		...props
+	});
+});
+const TooltipArrow = forwardRef(function TooltipArrow({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
+		ref,
+		className: `${tooltip_module_default.arrow} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { TooltipArrow, TooltipPopup, TooltipPositioner };
+
+//# sourceMappingURL=parts.js.map

package/dist/tooltip/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseTooltip","styles"],"sources":["../../src/tooltip/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Tooltip.\n *\n * @example\n * ```tsx\n * import { Tooltip } from '@base-ui/react/tooltip';\n * import { TooltipPositioner, TooltipPopup, TooltipArrow } from '@brijbyte/agentic-ui/tooltip';\n *\n * <Tooltip.Provider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger render={<button>Hover me</button>} />\n *     <Tooltip.Portal>\n *       <TooltipPositioner side=\"top\" sideOffset={6}>\n *         <TooltipPopup>\n *           <TooltipArrow />\n *           Tooltip content\n *         </TooltipPopup>\n *       </TooltipPositioner>\n *     </Tooltip.Portal>\n *   </Tooltip.Root>\n * </Tooltip.Provider>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\n\ntype BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;\ntype BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;\n\nexport interface TooltipPositionerProps extends Omit<BasePositionerProps, \"className\"> {\n  className?: string;\n}\nexport interface TooltipPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface TooltipArrowProps extends Omit<BaseArrowProps, \"className\"> {\n  className?: string;\n}\n\nexport const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(\n  { className, ...props },\n  ref,\n) {\n  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,QAAY,YAAb;EAA6B;EAAK,WAAW,GAAGC,uBAAO,WAAW,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5G;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG"}

package/dist/tooltip/tooltip.css

@@ -0,0 +1,60 @@
+@layer components {
+  .positioner_yQZxSq {
+    z-index: var(--z-tooltip);
+  }
+
+  .popup_yQZxSq {
+    background-color: var(--color-surface-3);
+    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-primary);
+    line-height: var(--line-height-normal);
+    word-break: break-word;
+    max-width: 240px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
+  }
+
+  .popup_yQZxSq[data-instant] {
+    transition-duration: 0s;
+  }
+
+  .popup_yQZxSq[data-starting-style] {
+    opacity: 0;
+    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(.95);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup_yQZxSq {
+      transition: opacity .125s var(--easing-ease-out);
+    }
+
+    .popup_yQZxSq[data-ending-style] {
+      transition: opacity 75ms var(--easing-ease-in);
+    }
+
+    .popup_yQZxSq[data-starting-style], .popup_yQZxSq[data-ending-style] {
+      transform: none;
+    }
+  }
+
+  .arrow_yQZxSq {
+    width: 8px;
+    height: 8px;
+    fill: var(--color-surface-3);
+    stroke: var(--color-line);
+    stroke-width: 1px;
+  }
+}

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./tooltip.module.css";
+
+//#region src/tooltip/tooltip.d.ts
+interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement;
+  delay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+}
+declare function Tooltip({
+  content,
+  children,
+  delay,
+  side,
+  align
+}: TooltipProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Tooltip, TooltipProps, styles };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"mappings":";;;;;UAIiB,YAAA;EACf,OAAA,EAAS,SAAA;EACT,QAAA,EAAU,YAAA;EACV,KAAA;EACA,IAAA;EACA,KAAA;AAAA;AAAA,iBAGc,OAAA,CAAA;EAAU,OAAA;EAAS,QAAA;EAAU,KAAA;EAAa,IAAA;EAAc;AAAA,GAAoB,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/tooltip/tooltip.js

@@ -0,0 +1,23 @@
+import tooltip_module_default from "./tooltip.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/tooltip/tooltip.tsx
+function Tooltip$1({ content, children, delay = 400, side = "top", align = "center" }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: children }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			className: tooltip_module_default.positioner,
+			side,
+			align,
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: tooltip_module_default.popup,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tooltip_module_default.arrow }), content]
+			})
+		}) })] })
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["Tooltip","BaseTooltip","styles"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport styles from \"./tooltip.module.css\";\n\nexport interface TooltipProps {\n  content: ReactNode;\n  children: ReactElement;\n  delay?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nexport function Tooltip({ content, children, delay = 400, side = \"top\", align = \"center\" }: TooltipProps) {\n  return (\n    <BaseTooltip.Provider delay={delay}>\n      <BaseTooltip.Root>\n        <BaseTooltip.Trigger render={children} />\n        <BaseTooltip.Portal>\n          <BaseTooltip.Positioner className={styles.positioner} side={side} align={align} sideOffset={6}>\n            <BaseTooltip.Popup className={styles.popup}>\n              <BaseTooltip.Arrow className={styles.arrow} />\n              {content}\n            </BaseTooltip.Popup>\n          </BaseTooltip.Positioner>\n        </BaseTooltip.Portal>\n      </BaseTooltip.Root>\n    </BaseTooltip.Provider>\n  );\n}\nexport { styles as TooltipStyles };\n"],"mappings":";;;;AAYA,SAAgBA,UAAQ,EAAE,SAAS,UAAU,QAAQ,KAAK,OAAO,OAAO,QAAQ,YAA0B;AACxG,QACE,oBAACC,QAAY,UAAb;EAA6B;YAC3B,qBAACA,QAAY,MAAb,EAAA,UAAA,CACE,oBAACA,QAAY,SAAb,EAAqB,QAAQ,UAAY,CAAA,EACzC,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;GAAwB,WAAWC,uBAAO;GAAkB;GAAa;GAAO,YAAY;aAC1F,qBAACD,QAAY,OAAb;IAAmB,WAAWC,uBAAO;cAArC,CACE,oBAACD,QAAY,OAAb,EAAmB,WAAWC,uBAAO,OAAS,CAAA,EAC7C,QACiB;;GACG,CAAA,EACN,CAAA,CACJ,EAAA,CAAA;EACE,CAAA"}

package/dist/tooltip/tooltip.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/tooltip/tooltip.module.js

@@ -0,0 +1,10 @@
+//#region src/tooltip/tooltip.module.css
+var tooltip_module_default = {
+	"arrow": "arrow_yQZxSq",
+	"popup": "popup_yQZxSq",
+	"positioner": "positioner_yQZxSq"
+};
+//#endregion
+export { tooltip_module_default as default };
+
+//# sourceMappingURL=tooltip.module.js.map

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

@@ -0,0 +1 @@
+{"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"}