@tooee/toasts 0.1.0

package/dist/ToastContainer.d.ts

@@ -0,0 +1,2 @@
+export declare function ToastContainer(): import("react").ReactNode;
+//# sourceMappingURL=ToastContainer.d.ts.map

package/dist/ToastContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,cAAc,8BA6B7B"}

package/dist/ToastContainer.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useTerminalDimensions } from "@opentui/react";
+import { useTheme } from "@tooee/themes";
+import { useToast } from "./ToastProvider.js";
+const LEVEL_ICONS = {
+    info: "ℹ",
+    success: "✓",
+    warning: "⚠",
+    error: "✗",
+};
+function getLevelColor(theme, level) {
+    switch (level) {
+        case "info":
+            return theme.info;
+        case "success":
+            return theme.success;
+        case "warning":
+            return theme.warning;
+        case "error":
+            return theme.error;
+    }
+}
+export function ToastContainer() {
+    const { currentToast } = useToast();
+    const { theme } = useTheme();
+    const { width: termWidth } = useTerminalDimensions();
+    if (!currentToast)
+        return null;
+    const maxWidth = Math.min(50, termWidth - 4);
+    const borderColor = getLevelColor(theme, currentToast.level);
+    const icon = LEVEL_ICONS[currentToast.level];
+    return (_jsx("box", { position: "absolute", bottom: 1, right: 1, maxWidth: maxWidth, border: true, borderColor: borderColor, backgroundColor: theme.backgroundPanel, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { content: `${icon} ${currentToast.message}`, fg: theme.text }) }));
+}
+//# sourceMappingURL=ToastContainer.js.map

package/dist/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.js","sourceRoot":"","sources":["../src/ToastContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAG7C,MAAM,WAAW,GAA+B;IAC9C,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,GAAG;CACX,CAAA;AAED,SAAS,aAAa,CAAC,KAA2C,EAAE,KAAiB;IACnF,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,MAAM;YACT,OAAO,KAAK,CAAC,IAAI,CAAA;QACnB,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAA;QACtB,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,OAAO,CAAA;QACtB,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,KAAK,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,CAAA;IACnC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC5B,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,qBAAqB,EAAE,CAAA;IAEpD,IAAI,CAAC,YAAY;QAAE,OAAO,IAAI,CAAA;IAE9B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,GAAG,CAAC,CAAC,CAAA;IAC5C,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IAC5D,MAAM,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAE5C,OAAO,CACL,cACE,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,EAClB,MAAM,QACN,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,WAAW,EAAE,CAAC,EACd,YAAY,EAAE,CAAC,YAEf,eACE,OAAO,EAAE,GAAG,IAAI,IAAI,YAAY,CAAC,OAAO,EAAE,EAC1C,EAAE,EAAE,KAAK,CAAC,IAAI,GACd,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/ToastProvider.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { ToastController } from "./types.js";
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): ReactNode;
+export declare function useToast(): ToastController;
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAA4B,eAAe,EAAE,MAAM,YAAY,CAAA;AAa3E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,aAqDlE;AAED,wBAAgB,QAAQ,IAAI,eAAe,CAM1C"}

package/dist/ToastProvider.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from "react";
+const DEFAULT_DURATIONS = {
+    info: 2000,
+    success: 1500,
+    warning: 3000,
+    error: 5000,
+};
+let nextToastId = 0;
+const ToastContext = createContext(null);
+export function ToastProvider({ children }) {
+    const [currentToast, setCurrentToast] = useState(null);
+    const timerRef = useRef(null);
+    const clearTimer = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    const dismiss = useCallback(() => {
+        clearTimer();
+        setCurrentToast(null);
+    }, [clearTimer]);
+    const toast = useCallback((options) => {
+        clearTimer();
+        const level = options.level ?? "info";
+        const duration = options.duration ?? DEFAULT_DURATIONS[level] ?? 2000;
+        const id = options.id ?? `toast-${nextToastId++}`;
+        const entry = {
+            id,
+            message: options.message,
+            level,
+            duration,
+        };
+        setCurrentToast(entry);
+        timerRef.current = setTimeout(() => {
+            setCurrentToast((current) => (current?.id === id ? null : current));
+            timerRef.current = null;
+        }, duration);
+    }, [clearTimer]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => clearTimer();
+    }, [clearTimer]);
+    const controller = {
+        toast,
+        dismiss,
+        currentToast,
+    };
+    return _jsx(ToastContext.Provider, { value: controller, children: children });
+}
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (!ctx) {
+        throw new Error("useToast must be used within a ToastProvider");
+    }
+    return ctx;
+}
+//# sourceMappingURL=ToastProvider.js.map

package/dist/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sourceRoot":"","sources":["../src/ToastProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3F,MAAM,iBAAiB,GAA2B;IAChD,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,IAAI,WAAW,GAAG,CAAC,CAAA;AAEnB,MAAM,YAAY,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAA;AAEhE,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAA2B;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAA;IACzE,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAEnE,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC9B,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YAC9B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,UAAU,EAAE,CAAA;QACZ,eAAe,CAAC,IAAI,CAAC,CAAA;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,OAAqB,EAAE,EAAE;QACxB,UAAU,EAAE,CAAA;QAEZ,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAA;QACrC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,iBAAiB,CAAC,KAAK,CAAC,IAAI,IAAI,CAAA;QACrE,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,SAAS,WAAW,EAAE,EAAE,CAAA;QAEjD,MAAM,KAAK,GAAe;YACxB,EAAE;YACF,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,KAAK;YACL,QAAQ;SACT,CAAA;QAED,eAAe,CAAC,KAAK,CAAC,CAAA;QAEtB,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;YACnE,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;QACzB,CAAC,EAAE,QAAQ,CAAC,CAAA;IACd,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,qBAAqB;IACrB,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,CAAA;IAC3B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,UAAU,GAAoB;QAClC,KAAK;QACL,OAAO;QACP,YAAY;KACb,CAAA;IAED,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,QAAQ,GAAyB,CAAA;AACrF,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACpC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;IACjE,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ToastProvider, useToast } from "./ToastProvider.js";
+export { ToastContainer } from "./ToastContainer.js";
+export type { ToastLevel, ToastOptions, ToastEntry, ToastController } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast } from "./ToastProvider.js";
+export { ToastContainer } from "./ToastContainer.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+export type ToastLevel = "info" | "success" | "warning" | "error";
+export interface ToastOptions {
+    message: string;
+    level?: ToastLevel;
+    duration?: number;
+    id?: string;
+}
+export interface ToastEntry {
+    id: string;
+    message: string;
+    level: ToastLevel;
+    duration: number;
+}
+export interface ToastController {
+    toast(options: ToastOptions): void;
+    dismiss(): void;
+    currentToast: ToastEntry | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEjE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,UAAU,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,OAAO,IAAI,IAAI,CAAA;IACf,YAAY,EAAE,UAAU,GAAG,IAAI,CAAA;CAChC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@tooee/toasts",
+  "version": "0.1.0",
+  "description": "Toast notification system for Tooee",
+  "license": "MIT",
+  "author": "Gareth Andrew",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gingerhendrix/tooee.git",
+    "directory": "packages/toasts"
+  },
+  "homepage": "https://github.com/gingerhendrix/tooee",
+  "bugs": "https://github.com/gingerhendrix/tooee/issues",
+  "keywords": ["tui", "terminal", "cli", "opentui", "toasts", "notifications"],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "@tooee/source": "./src/index.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tooee/themes": "workspace:*"
+  },
+  "devDependencies": {
+    "@opentui/core": "^0.1.67",
+    "@opentui/react": "^0.1.67",
+    "@types/bun": "^1.3.5",
+    "@types/react": "^19.1.10",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "@opentui/core": "^0.1.67",
+    "@opentui/react": "^0.1.67",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/ToastContainer.tsx

@@ -0,0 +1,55 @@
+import { useTerminalDimensions } from "@opentui/react"
+import { useTheme } from "@tooee/themes"
+import { useToast } from "./ToastProvider.js"
+import type { ToastLevel } from "./types.js"
+
+const LEVEL_ICONS: Record<ToastLevel, string> = {
+  info: "ℹ",
+  success: "✓",
+  warning: "⚠",
+  error: "✗",
+}
+
+function getLevelColor(theme: ReturnType<typeof useTheme>["theme"], level: ToastLevel): string {
+  switch (level) {
+    case "info":
+      return theme.info
+    case "success":
+      return theme.success
+    case "warning":
+      return theme.warning
+    case "error":
+      return theme.error
+  }
+}
+
+export function ToastContainer() {
+  const { currentToast } = useToast()
+  const { theme } = useTheme()
+  const { width: termWidth } = useTerminalDimensions()
+
+  if (!currentToast) return null
+
+  const maxWidth = Math.min(50, termWidth - 4)
+  const borderColor = getLevelColor(theme, currentToast.level)
+  const icon = LEVEL_ICONS[currentToast.level]
+
+  return (
+    <box
+      position="absolute"
+      bottom={1}
+      right={1}
+      maxWidth={maxWidth}
+      border
+      borderColor={borderColor}
+      backgroundColor={theme.backgroundPanel}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text
+        content={`${icon} ${currentToast.message}`}
+        fg={theme.text}
+      />
+    </box>
+  )
+}

package/src/ToastProvider.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from "react"
+import type { ReactNode } from "react"
+import type { ToastOptions, ToastEntry, ToastController } from "./types.js"
+
+const DEFAULT_DURATIONS: Record<string, number> = {
+  info: 2000,
+  success: 1500,
+  warning: 3000,
+  error: 5000,
+}
+
+let nextToastId = 0
+
+const ToastContext = createContext<ToastController | null>(null)
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [currentToast, setCurrentToast] = useState<ToastEntry | null>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  const dismiss = useCallback(() => {
+    clearTimer()
+    setCurrentToast(null)
+  }, [clearTimer])
+
+  const toast = useCallback(
+    (options: ToastOptions) => {
+      clearTimer()
+
+      const level = options.level ?? "info"
+      const duration = options.duration ?? DEFAULT_DURATIONS[level] ?? 2000
+      const id = options.id ?? `toast-${nextToastId++}`
+
+      const entry: ToastEntry = {
+        id,
+        message: options.message,
+        level,
+        duration,
+      }
+
+      setCurrentToast(entry)
+
+      timerRef.current = setTimeout(() => {
+        setCurrentToast((current) => (current?.id === id ? null : current))
+        timerRef.current = null
+      }, duration)
+    },
+    [clearTimer],
+  )
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearTimer()
+  }, [clearTimer])
+
+  const controller: ToastController = {
+    toast,
+    dismiss,
+    currentToast,
+  }
+
+  return <ToastContext.Provider value={controller}>{children}</ToastContext.Provider>
+}
+
+export function useToast(): ToastController {
+  const ctx = useContext(ToastContext)
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider")
+  }
+  return ctx
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast } from "./ToastProvider.js"
+export { ToastContainer } from "./ToastContainer.js"
+export type { ToastLevel, ToastOptions, ToastEntry, ToastController } from "./types.js"

package/src/types.ts

@@ -0,0 +1,21 @@
+export type ToastLevel = "info" | "success" | "warning" | "error"
+
+export interface ToastOptions {
+  message: string
+  level?: ToastLevel
+  duration?: number
+  id?: string
+}
+
+export interface ToastEntry {
+  id: string
+  message: string
+  level: ToastLevel
+  duration: number
+}
+
+export interface ToastController {
+  toast(options: ToastOptions): void
+  dismiss(): void
+  currentToast: ToastEntry | null
+}