@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/tabs/tabs.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import styles from "./tabs.module.css";
+
+export interface TabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  value?: string;
+  defaultValue?: string;
+  /** `eventDetails` is the base-ui event details object. */
+  onValueChange?: (value: unknown, eventDetails: unknown) => void;
+  className?: string;
+}
+
+export function Tabs({ items, className, ...props }: TabsProps) {
+  const defaultVal = props.defaultValue ?? items[0]?.value;
+
+  return (
+    <BaseTabs.Root
+      className={`${styles.root} ${className ?? ""}`}
+      defaultValue={defaultVal}
+      onValueChange={props.onValueChange as never}
+      value={props.value}
+    >
+      <BaseTabs.List className={styles.list}>
+        {items.map((item) => (
+          <BaseTabs.Tab key={item.value} value={item.value} disabled={item.disabled} className={styles.tab}>
+            {item.icon}
+            {item.label}
+          </BaseTabs.Tab>
+        ))}
+      </BaseTabs.List>
+      {items.map((item) => (
+        <BaseTabs.Panel key={item.value} value={item.value} className={styles.panel}>
+          {item.content}
+        </BaseTabs.Panel>
+      ))}
+    </BaseTabs.Root>
+  );
+}
+export { styles as TabsStyles };

package/src/toast/index.ts

@@ -0,0 +1,6 @@
+export { ToastViewport, ToastProvider, useToastManager } from "./toast";
+export type { ToastType, ToastViewportProps, ToastProviderProps } from "./toast";
+
+export { ToastRoot, ToastTitle, ToastDescription, ToastClose, ToastViewportPart } from "./parts";
+export type { ToastRootProps, ToastTitleProps, ToastDescriptionProps, ToastCloseProps, ToastViewportPartProps } from "./parts";
+export { ToastStyles } from "./toast";

package/src/toast/parts.tsx

@@ -0,0 +1,76 @@
+/**
+ * Styled primitives for Toast.
+ *
+ * @example
+ * ```tsx
+ * import { Toast } from '@base-ui/react/toast';
+ * import { ToastRoot, ToastTitle, ToastDescription, ToastClose } from '@brijbyte/agentic-ui/toast';
+ *
+ * // Inside a Toast.Viewport or custom viewport:
+ * manager.toasts.map((toast) => (
+ *   <ToastRoot key={toast.id} toast={toast}>
+ *     <ToastTitle />
+ *     <ToastDescription />
+ *     <ToastClose aria-label="Dismiss" />
+ *   </ToastRoot>
+ * ))
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import styles from "./toast.module.css";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseToast.Root>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BaseToast.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseToast.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof BaseToast.Close>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof BaseToast.Viewport>;
+
+export interface ToastRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+export interface ToastTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface ToastDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+export interface ToastCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+export interface ToastViewportPartProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+
+export const ToastRoot = forwardRef<ComponentRef<typeof BaseToast.Root>, ToastRootProps>(function ToastRoot({ className, ...props }, ref) {
+  return <BaseToast.Root ref={ref} className={`${styles.toast} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastTitle = forwardRef<ComponentRef<typeof BaseToast.Title>, ToastTitleProps>(function ToastTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastDescription = forwardRef<ComponentRef<typeof BaseToast.Description>, ToastDescriptionProps>(function ToastDescription(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastClose = forwardRef<ComponentRef<typeof BaseToast.Close>, ToastCloseProps>(function ToastClose(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+});
+
+export const ToastViewportPart = forwardRef<ComponentRef<typeof BaseToast.Viewport>, ToastViewportPartProps>(function ToastViewportPart(
+  { className, ...props },
+  ref,
+) {
+  return <BaseToast.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+});

package/src/toast/toast.module.css

@@ -0,0 +1,212 @@
+@layer components {
+  /* ─── Viewport ───────────────────────────────────────────────────── */
+  .viewport {
+    position: fixed;
+    bottom: var(--space-4);
+    right: var(--space-4);
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    width: 360px;
+    max-width: calc(100vw - var(--space-8));
+    list-style: none;
+    pointer-events: none;
+    outline: none;
+  }
+  /* List variant — toasts sit in a normal column */
+  .viewport-list {
+    gap: var(--space-2);
+  }
+  /* Stacked variant — toasts overlap; viewport height = frontmost toast */
+  .viewport-stacked {
+    gap: 0;
+  }
+  /* ─── Toast base ─────────────────────────────────────────────────── */
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-popover);
+    pointer-events: auto;
+    cursor: default;
+    width: 100%;
+  }
+  @supports (backdrop-filter: blur(12px)) {
+    .toast {
+      backdrop-filter: blur(12px) saturate(1.5);
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+    }
+  }
+  /* ─── List mode animations ───────────────────────────────────────── */
+  .viewport-list .toast {
+    transform-origin: bottom right;
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 300ms var(--easing-ease-out),
+      transform 300ms var(--easing-spring);
+    @starting-style {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--space-4)));
+    }
+  }
+  .viewport-list .toast[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition:
+      opacity 200ms var(--easing-ease-in),
+      transform 200ms var(--easing-ease-in);
+  }
+  /* ─── Stacked mode ───────────────────────────────────────────────── */
+  /*
+   * Base UI provides on each toast root (as inline styles):
+   *   --toast-index   : plain integer, 0 = frontmost/newest
+   *   --toast-offset-y: "Npx" — cumulative height of all toasts above
+   *   --toast-height  : "Npx" — this toast's measured height
+   *
+   * Base UI provides on the viewport:
+   *   --toast-frontmost-height: "Npx" — height of index-0 toast
+   *
+   * Collapsed: toasts sit at bottom:0, stacked via scale+translate.
+   * Expanded (data-expanded): each toast moves to its offset position.
+   */
+  .viewport-stacked {
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+    padding-top: 20px;
+    box-sizing: content-box;
+    clip-path: inset(0 0 0 0 round var(--radius-xl));
+    transition:
+      clip-path 200ms var(--easing-ease-out),
+      height 200ms var(--easing-ease-out);
+  }
+  .viewport-stacked[data-expanded] {
+    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+  }
+  /* Fill the gaps between expanded toasts so the mouse doesn't leave
+     the viewport as it moves between them, which would collapse the stack */
+  .viewport-stacked[data-expanded]::after {
+    content: "";
+    position: absolute;
+    inset: -9999px 0 0 0;
+    pointer-events: auto;
+    z-index: 0;
+  }
+  .toast-stacked {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: calc(50 - var(--toast-index));
+    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * 0.04));
+    transform-origin: bottom center;
+    opacity: calc(1 - var(--toast-index) * 0.15);
+    transition:
+      transform 200ms var(--easing-ease-out),
+      opacity 200ms var(--easing-ease-out);
+  }
+  /* Expanded: each toast animates to its stacked position with a gap */
+  .viewport-stacked[data-expanded] .toast-stacked {
+    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Enter: new toast slides up from below */
+  .viewport-stacked .toast-stacked {
+    @starting-style {
+      opacity: 0;
+      transform: translateY(16px) scale(calc(1 - var(--toast-index) * 0.04));
+    }
+  }
+  /* Exit: dismissed toast slides right */
+  .viewport-stacked .toast-stacked[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition:
+      opacity 150ms var(--easing-ease-in),
+      transform 150ms var(--easing-ease-in);
+  }
+  /* ─── Variant tints ──────────────────────────────────────────────── */
+  .toast-success {
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
+  }
+  .toast-error {
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
+  }
+  .toast-warning {
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
+  }
+  .toast-info {
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
+  }
+  /* ─── Icon ───────────────────────────────────────────────────────── */
+  .icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+  }
+  .icon-success {
+    color: var(--color-success-solid);
+  }
+  .icon-warning {
+    color: var(--color-warning-solid);
+  }
+  .icon-error {
+    color: var(--color-error-solid);
+  }
+  .icon-info {
+    color: var(--color-info-solid);
+  }
+  /* ─── Content ────────────────────────────────────────────────────── */
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-0-5);
+    min-width: 0;
+  }
+  .title {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
+  }
+  .description {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+  /* ─── Close button ───────────────────────────────────────────────── */
+  .close {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    margin-top: 1px;
+  }
+  .close:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+  .close:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+}

package/src/toast/toast.tsx

@@ -0,0 +1,129 @@
+import type { ReactNode } from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import styles from "./toast.module.css";
+
+export type ToastType = "default" | "success" | "warning" | "error" | "info";
+
+// Re-export for consumer convenience
+export const useToastManager = BaseToast.useToastManager;
+
+function XIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+      <path d="M1 1L9 9M9 1L1 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function StatusIcon({ type }: { type: string }) {
+  if (type === "success") {
+    return (
+      <svg viewBox="0 0 16 16" fill="none" className={`${styles.icon} ${styles["icon-success"]}`}>
+        <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M4.5 8L6.5 10.5L11 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  if (type === "error") {
+    return (
+      <svg viewBox="0 0 16 16" fill="none" className={`${styles.icon} ${styles["icon-error"]}`}>
+        <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  if (type === "warning") {
+    return (
+      <svg viewBox="0 0 16 16" fill="none" className={`${styles.icon} ${styles["icon-warning"]}`}>
+        <path d="M8 2L14.5 13H1.5L8 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+        <path d="M8 6.5V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <circle cx="8" cy="11" r="0.75" fill="currentColor" />
+      </svg>
+    );
+  }
+  if (type === "info") {
+    return (
+      <svg viewBox="0 0 16 16" fill="none" className={`${styles.icon} ${styles["icon-info"]}`}>
+        <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M8 7V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <circle cx="8" cy="5" r="0.75" fill="currentColor" />
+      </svg>
+    );
+  }
+  return null;
+}
+
+export interface ToastViewportProps {
+  /**
+   * "stacked" — toasts fan out behind each other like Sonner.
+   *   Collapsed: only the front toast is fully visible; others peek as
+   *   scaled-down cards behind it. Hover/focus expands the full stack.
+   *
+   * "list" — toasts stack vertically, each fully visible (default behaviour).
+   */
+  variant?: "stacked" | "list";
+  /**
+   * Maximum number of toasts shown at once.
+   * Defaults to 5 for "stacked", 3 for "list".
+   * Oldest toasts are removed when the limit is exceeded.
+   */
+  limit?: number;
+}
+
+const DEFAULT_LIMIT: Record<NonNullable<ToastViewportProps["variant"]>, number> = {
+  stacked: 5,
+  list: 3,
+};
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  variant?: ToastViewportProps["variant"];
+  limit?: number;
+  timeout?: number;
+}
+
+/**
+ * Drop-in provider that wires limit defaults to the chosen variant.
+ * Use this instead of base-ui's Toast.Provider when using ToastViewport.
+ */
+const MAX_LIMIT: Record<NonNullable<ToastViewportProps["variant"]>, number> = {
+  stacked: 10,
+  list: 5,
+};
+
+export function ToastProvider({ children, variant = "list", limit, timeout }: ToastProviderProps) {
+  const resolvedLimit = Math.min(limit ?? DEFAULT_LIMIT[variant], MAX_LIMIT[variant]);
+  return (
+    <BaseToast.Provider limit={resolvedLimit} timeout={timeout}>
+      {children}
+    </BaseToast.Provider>
+  );
+}
+
+export function ToastViewport({ variant = "list", limit: _limit }: ToastViewportProps) {
+  const manager = useToastManager();
+  const isStacked = variant === "stacked";
+
+  return (
+    <BaseToast.Viewport className={`${styles.viewport} ${isStacked ? styles["viewport-stacked"] : styles["viewport-list"]}`}>
+      {manager.toasts.map((toast) => (
+        <BaseToast.Root
+          key={toast.id}
+          toast={toast}
+          className={`${styles.toast} ${isStacked ? styles["toast-stacked"] : ""} ${styles[`toast-${toast.type ?? "default"}`]}`}
+          swipeDirection={isStacked ? ["right", "down"] : ["right", "down"]}
+        >
+          {toast.type && toast.type !== "default" && <StatusIcon type={toast.type} />}
+          <div className={styles.content}>
+            {toast.title && <BaseToast.Title className={styles.title} />}
+            {toast.description && <BaseToast.Description className={styles.description} />}
+          </div>
+          <BaseToast.Close className={styles.close} aria-label="Dismiss">
+            <XIcon />
+          </BaseToast.Close>
+        </BaseToast.Root>
+      ))}
+    </BaseToast.Viewport>
+  );
+}
+export { styles as ToastStyles };

package/src/tooltip/index.ts

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

package/src/tooltip/parts.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import styles from "./tooltip.module.css";
+
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseTooltip.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseTooltip.Popup>;
+type BaseArrowProps = ComponentPropsWithoutRef<typeof BaseTooltip.Arrow>;
+
+export interface TooltipPositionerProps extends Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+export interface TooltipPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface TooltipArrowProps extends Omit<BaseArrowProps, "className"> {
+  className?: string;
+}
+
+export const TooltipPositioner = forwardRef<ComponentRef<typeof BaseTooltip.Positioner>, TooltipPositionerProps>(function TooltipPositioner(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+});
+
+export const TooltipPopup = forwardRef<ComponentRef<typeof BaseTooltip.Popup>, TooltipPopupProps>(function TooltipPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const TooltipArrow = forwardRef<ComponentRef<typeof BaseTooltip.Arrow>, TooltipArrowProps>(function TooltipArrow(
+  { className, ...props },
+  ref,
+) {
+  return <BaseTooltip.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...props} />;
+});

package/src/tooltip/tooltip.module.css

@@ -0,0 +1,56 @@
+@layer components {
+  .positioner {
+    z-index: var(--z-tooltip);
+  }
+  .popup {
+    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);
+    max-width: 240px;
+    word-break: break-word;
+    transform-origin: var(--transform-origin);
+    transition:
+      opacity 150ms var(--easing-ease-out),
+      transform 300ms var(--easing-spring);
+  }
+  /* Skip animation when moving between tooltips quickly */
+  .popup[data-instant] {
+    transition-duration: 0ms;
+  }
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .popup {
+      transition: opacity 125ms var(--easing-ease-out);
+    }
+    .popup[data-ending-style] {
+      transition: opacity 75ms var(--easing-ease-in);
+    }
+    .popup[data-starting-style],
+    .popup[data-ending-style] {
+      transform: none;
+    }
+  }
+  .arrow {
+    width: 8px;
+    height: 8px;
+    fill: var(--color-surface-3);
+    stroke: var(--color-line);
+    stroke-width: 1;
+  }
+}

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode, ReactElement } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import styles from "./tooltip.module.css";
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactElement;
+  delay?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+}
+
+export function Tooltip({ content, children, delay = 400, side = "top", align = "center" }: TooltipProps) {
+  return (
+    <BaseTooltip.Provider delay={delay}>
+      <BaseTooltip.Root>
+        <BaseTooltip.Trigger render={children} />
+        <BaseTooltip.Portal>
+          <BaseTooltip.Positioner className={styles.positioner} side={side} align={align} sideOffset={6}>
+            <BaseTooltip.Popup className={styles.popup}>
+              <BaseTooltip.Arrow className={styles.arrow} />
+              {content}
+            </BaseTooltip.Popup>
+          </BaseTooltip.Positioner>
+        </BaseTooltip.Portal>
+      </BaseTooltip.Root>
+    </BaseTooltip.Provider>
+  );
+}
+export { styles as TooltipStyles };