@hexdspace/react 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, QueryKey } from '@tanstack/react-query';
 import { ResultOk, ResultError } from '@hexdspace/util';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
 type NotificationVariant = 'success' | 'warning' | 'error' | 'info';
 declare const DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
@@ -39,17 +39,87 @@ declare class NotifierController {
 }
 declare const notifierController: NotifierController;
 
+type ToastTransition = {
+    enter: string;
+    exit: string;
+    collapseDuration?: number;
+};
+type ToastTheme = {
+    lightBg?: string;
+    lightText?: string;
+    lightProgress?: string;
+    darkBg?: string;
+    darkText?: string;
+    darkProgress?: string;
+    progressInfo?: string;
+    progressSuccess?: string;
+    progressWarning?: string;
+    progressError?: string;
+    width?: string;
+    contentPadding?: string;
+    bodyColumnGap?: string;
+    bodyRowGap?: string;
+    transition?: ToastTransition;
+    action?: Partial<ToastActionTheme>;
+    iconColors?: Partial<Record<NotificationVariant, string>>;
+};
+type ToastifyCSSVars = CSSProperties & {
+    '--toastify-color-light'?: string;
+    '--toastify-text-color-light'?: string;
+    '--toastify-color-progress-light'?: string;
+    '--toastify-color-dark'?: string;
+    '--toastify-text-color-dark'?: string;
+    '--toastify-color-progress-dark'?: string;
+    '--toastify-color-progress-info'?: string;
+    '--toastify-color-progress-success'?: string;
+    '--toastify-color-progress-warning'?: string;
+    '--toastify-color-progress-error'?: string;
+    '--toastify-toast-width'?: string;
+};
+type ToastActionTheme = {
+    padding: string;
+    borderRadius: string;
+    background: string;
+    hoverBackground: string;
+    focusOutline: string;
+    focusOutlineOffset: string;
+    fontWeight: number | string;
+    transition: string;
+    focusTransform: string;
+    activeTransform: string;
+    color?: string;
+    hoverColor?: string;
+    marginLeft?: string;
+    marginTop?: string;
+};
+type ResolvedToastTheme = {
+    lightBg: string;
+    lightText: string;
+    lightProgress: string;
+    darkBg: string;
+    darkText: string;
+    darkProgress: string;
+    progressInfo: string;
+    progressSuccess: string;
+    progressWarning: string;
+    progressError: string;
+    width: string;
+    contentPadding: string;
+    bodyColumnGap: string;
+    bodyRowGap: string;
+    transition?: ToastTransition;
+    action: ToastActionTheme;
+    iconColors: Record<NotificationVariant, string>;
+};
+declare function resolveToastTheme(theme?: ToastTheme): ResolvedToastTheme;
+
 type NotificationHostProps = {
     channel?: string;
     isDark?: () => boolean;
+    theme?: ToastTheme;
 };
 declare const NotificationHost: React.FC<NotificationHostProps>;
 
-declare const NotifierProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-declare function useNotifierController(): NotifierController;
-
 type InstructionContext = {
     queryClient: QueryClient;
 };
@@ -93,4 +163,4 @@ type ResponsiveMutation<Args, Res> = {
 
 declare function useResponsiveMutation<Args, Res>(responsiveMutation: ResponsiveMutation<Args, Res>, queryClient: QueryClient): _tanstack_react_query.UseMutationResult<UIOk<Res>, UIFail, Args, OptimisticSnapshot | undefined>;
 
-export { type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type Instruction, type InstructionContext, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, NotifierProvider, type OptimisticSnapshot, type ResponsiveMutation, type UIFail, type UIOk, type UIResult, notifierController, ui, useNotifierController, useResponsiveMutation };
+export { type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type Instruction, type InstructionContext, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OptimisticSnapshot, type ResolvedToastTheme, type ResponsiveMutation, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, type UIFail, type UIOk, type UIResult, notifierController, resolveToastTheme, ui, useResponsiveMutation };

package/dist/index.js

@@ -102,50 +102,301 @@ var subscribe = new SubscribeUseCase(bus);
 var notifierController = new NotifierController(sendNotification, subscribe);
 
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
-import { useEffect, useMemo as useMemo2 } from "react";
-import { ToastContainer, toast } from "react-toastify";
-import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo as useMemo2 } from "react";
+import { toast as toast2, ToastContainer } from "react-toastify";
 
 // src/feature/notifier/entity/notification.ts
 var DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
 
-// src/feature/notifier/infra/web/react/NotifierProvider.tsx
-import { createContext, useContext, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-var NotifierContext = createContext(null);
-var NotifierProvider = ({ children }) => {
-  const controller = useMemo(() => notifierController, []);
-  return /* @__PURE__ */ jsx(NotifierContext.Provider, { value: { controller }, children });
-};
-function useNotifierController() {
-  const ctx = useContext(NotifierContext);
-  if (!ctx) throw new Error("useNotifierController must be used within <NotifierProvider>");
-  return ctx.controller;
-}
-
 // src/feature/notifier/infra/web/react/CustomToastTransition.tsx
 import { cssTransition } from "react-toastify";
+var CUSTOM_TRANSITION_STYLE_ID = "hexd-toast-transition-styles";
+var CUSTOM_TRANSITION_STYLES = `
+@keyframes slideIn {
+    from { transform: translateY(-20px); opacity: 0; }
+    to   { transform: translateY(0);     opacity: 1; }
+}
+
+@keyframes slideOut {
+    from { transform: translateY(0);     opacity: 1; }
+    to   { transform: translateY(-20px); opacity: 0; }
+}
+
+.slideIn  {
+    animation: slideIn 0.35s forwards;
+}
+
+.slideOut {
+    animation: slideOut 0.25s forwards;
+}
+`;
+var ensureCustomToastTransitionStyles = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(CUSTOM_TRANSITION_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = CUSTOM_TRANSITION_STYLE_ID;
+  style.textContent = CUSTOM_TRANSITION_STYLES;
+  document.head.appendChild(style);
+};
 var SlideUp = cssTransition({
   enter: "slideIn",
   exit: "slideOut",
-  collapseDuration: 300,
-  appendPosition: false,
-  collapse: true
+  collapseDuration: 300
 });
+var buildToastTransition = (transition) => {
+  ensureCustomToastTransitionStyles();
+  if (!transition) return SlideUp;
+  return cssTransition(transition);
+};
+
+// src/feature/notifier/infra/web/react/ToastContent.tsx
+import { useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_NOTIFICATION_VARIANT = "info";
+var TOAST_ICON_BY_VARIANT = {
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  error: XCircleIcon,
+  info: InfoIcon
+};
+var ToastContent = ({ notification, theme, mode }) => {
+  const { title, content, action } = notification;
+  const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
+  const Icon = TOAST_ICON_BY_VARIANT[variant];
+  const iconColor = theme.iconColors[variant];
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isActive, setIsActive] = useState(false);
+  const textColor = mode === "dark" ? theme.darkText : theme.lightText;
+  const actionTextColor = theme.action.color ?? textColor;
+  const actionHoverColor = theme.action.hoverColor ?? actionTextColor;
+  const actionStyle = useMemo(() => {
+    const background = isHovered ? theme.action.hoverBackground : theme.action.background;
+    const color = isHovered ? actionHoverColor : actionTextColor;
+    const transform = isActive ? theme.action.activeTransform : isFocused ? theme.action.focusTransform : void 0;
+    return {
+      alignSelf: "flex-start",
+      padding: theme.action.padding,
+      borderRadius: theme.action.borderRadius,
+      background,
+      color,
+      font: "inherit",
+      fontWeight: theme.action.fontWeight,
+      cursor: "pointer",
+      transition: theme.action.transition,
+      outline: isFocused ? theme.action.focusOutline : "none",
+      outlineOffset: isFocused ? theme.action.focusOutlineOffset : void 0,
+      transform,
+      marginLeft: theme.action.marginLeft
+    };
+  }, [actionHoverColor, actionTextColor, isActive, isFocused, isHovered, theme.action]);
+  const handleActionClick = async () => {
+    if (!action) return;
+    try {
+      await action.onClick?.();
+    } catch (error) {
+      console.error("Notification action failed", error);
+    } finally {
+      toast.dismiss(notification.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: theme.contentPadding,
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem",
+        width: "100%",
+        textAlign: "left"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  style: { color: iconColor, padding: "0.125rem", width: "1.25rem", height: "1.25rem", flexShrink: 0 },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "font-semibold leading-tight", children: title })
+            ]
+          }
+        ),
+        (content || action) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: action ? "1fr auto" : "1fr",
+              columnGap: theme.bodyColumnGap,
+              rowGap: theme.bodyRowGap,
+              alignItems: "center",
+              width: "100%"
+            },
+            children: [
+              content && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    minWidth: 0,
+                    textAlign: "left",
+                    fontSize: "0.875rem",
+                    color: textColor,
+                    opacity: 0.9
+                  },
+                  children: content
+                }
+              ),
+              action && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  style: {
+                    ...actionStyle,
+                    marginTop: theme.action.marginTop,
+                    fontSize: "0.875rem"
+                  },
+                  onMouseEnter: () => setIsHovered(true),
+                  onMouseLeave: () => {
+                    setIsHovered(false);
+                    setIsActive(false);
+                  },
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => {
+                    setIsFocused(false);
+                    setIsActive(false);
+                  },
+                  onMouseDown: () => setIsActive(true),
+                  onMouseUp: () => setIsActive(false),
+                  onClick: handleActionClick,
+                  children: action.label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/feature/notifier/entity/toast-theme.ts
+var DEFAULT_ACTION_THEME = {
+  padding: "0.35rem 0.75rem",
+  borderRadius: "0.5rem",
+  background: "rgba(79, 70, 229, 0.12)",
+  hoverBackground: "rgba(79, 70, 229, 0.2)",
+  focusOutline: "2px solid #4338ca",
+  focusOutlineOffset: "2px",
+  fontWeight: 600,
+  transition: "background-color 0.2s ease, color 0.2s ease, transform 0.2s ease",
+  focusTransform: "translateY(-1px)",
+  activeTransform: "translateY(0)",
+  marginLeft: "auto",
+  marginTop: "0.15rem"
+};
+var DEFAULT_ICON_COLORS = {
+  info: "#2563eb",
+  success: "#16a34a",
+  warning: "#f59e0b",
+  error: "#dc2626"
+};
+var DEFAULT_THEME_BASE = {
+  lightBg: "#f8fafc",
+  lightText: "#0f172a",
+  lightProgress: "#4f46e5",
+  darkBg: "#111827",
+  darkText: "#e5e7eb",
+  darkProgress: "#a5b4fc",
+  progressInfo: "#60a5fa",
+  progressSuccess: "#34d399",
+  progressWarning: "#fbbf24",
+  progressError: "#f87171",
+  width: "min(24rem, calc(100vw - 2rem))",
+  contentPadding: "0.5rem 0.75rem 1rem 0.5rem",
+  bodyColumnGap: "0.75rem",
+  bodyRowGap: "0.25rem",
+  transition: {
+    enter: "slideIn",
+    exit: "slideOut",
+    collapseDuration: 300
+  }
+};
+function resolveToastTheme(theme) {
+  return {
+    lightBg: theme?.lightBg ?? DEFAULT_THEME_BASE.lightBg,
+    lightText: theme?.lightText ?? DEFAULT_THEME_BASE.lightText,
+    lightProgress: theme?.lightProgress ?? DEFAULT_THEME_BASE.lightProgress,
+    darkBg: theme?.darkBg ?? DEFAULT_THEME_BASE.darkBg,
+    darkText: theme?.darkText ?? DEFAULT_THEME_BASE.darkText,
+    darkProgress: theme?.darkProgress ?? DEFAULT_THEME_BASE.darkProgress,
+    progressInfo: theme?.progressInfo ?? DEFAULT_THEME_BASE.progressInfo,
+    progressSuccess: theme?.progressSuccess ?? DEFAULT_THEME_BASE.progressSuccess,
+    progressWarning: theme?.progressWarning ?? DEFAULT_THEME_BASE.progressWarning,
+    progressError: theme?.progressError ?? DEFAULT_THEME_BASE.progressError,
+    width: theme?.width ?? DEFAULT_THEME_BASE.width,
+    contentPadding: theme?.contentPadding ?? DEFAULT_THEME_BASE.contentPadding,
+    bodyColumnGap: theme?.bodyColumnGap ?? DEFAULT_THEME_BASE.bodyColumnGap,
+    bodyRowGap: theme?.bodyRowGap ?? DEFAULT_THEME_BASE.bodyRowGap,
+    transition: theme?.transition ?? DEFAULT_THEME_BASE.transition,
+    action: {
+      ...DEFAULT_ACTION_THEME,
+      ...theme?.action ?? {}
+    },
+    iconColors: {
+      ...DEFAULT_ICON_COLORS,
+      ...theme?.iconColors ?? {}
+    }
+  };
+}
 
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
-  const controller = useNotifierController();
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark, theme }) => {
+  const resolvedTheme = useMemo2(() => resolveToastTheme(theme), [theme]);
+  const mode = useMemo2(() => {
+    if (!isDark) {
+      return "light";
+    }
+    return isDark() ? "dark" : "light";
+  }, [isDark]);
+  const style = useMemo2(() => ({
+    "--toastify-color-light": resolvedTheme.lightBg,
+    "--toastify-text-color-light": resolvedTheme.lightText,
+    "--toastify-color-progress-light": resolvedTheme.lightProgress,
+    "--toastify-color-dark": resolvedTheme.darkBg,
+    "--toastify-text-color-dark": resolvedTheme.darkText,
+    "--toastify-color-progress-dark": resolvedTheme.darkProgress,
+    "--toastify-color-progress-info": resolvedTheme.progressInfo,
+    "--toastify-color-progress-success": resolvedTheme.progressSuccess,
+    "--toastify-color-progress-warning": resolvedTheme.progressWarning,
+    "--toastify-color-progress-error": resolvedTheme.progressError,
+    "--toastify-toast-width": resolvedTheme.width
+  }), [resolvedTheme]);
+  const renderToast = useCallback((notification) => {
+    toast2(/* @__PURE__ */ jsx2(ToastContent, { notification, theme: resolvedTheme, mode }), {
+      toastId: notification.id,
+      icon: false
+    });
+  }, [mode, resolvedTheme]);
+  const transition = useMemo2(() => buildToastTransition(resolvedTheme.transition), [resolvedTheme.transition]);
   useEffect(() => {
     let unsub;
     let disposed = false;
-    const listener = {
-      notify(notification) {
-        renderToast(notification);
-      }
-    };
-    controller.handleSubscribe(channel, listener).then((unsubHandler) => {
+    const listener = { notify: renderToast };
+    notifierController.handleSubscribe(channel, listener).then((unsubHandler) => {
       if (disposed) {
         unsubHandler();
         return;
@@ -158,84 +409,23 @@ var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
       disposed = true;
       if (unsub) unsub();
     };
-  }, [channel, controller]);
-  const theme = useMemo2(() => {
-    if (!isDark) {
-      return "light";
-    }
-    return isDark() ? "dark" : "light";
-  }, []);
+  }, [channel, renderToast]);
   return /* @__PURE__ */ jsx2(
     ToastContainer,
     {
+      style,
       position: "bottom-right",
-      transition: SlideUp,
+      transition,
       newestOnTop: true,
       draggable: true,
       pauseOnFocusLoss: false,
       icon: false,
       pauseOnHover: true,
       hideProgressBar: false,
-      className: "custom-toast-container",
-      theme
+      theme: mode
     }
   );
 };
-var DEFAULT_NOTIFICATION_VARIANT = "info";
-var TOAST_ICON_BY_VARIANT = {
-  success: { Icon: CheckCircleIcon, color: "var(--success)" },
-  warning: { Icon: AlertTriangleIcon, color: "var(--warning)" },
-  error: { Icon: XCircleIcon, color: "var(--danger)" },
-  info: { Icon: InfoIcon, color: "var(--accent)" }
-};
-function renderToast(notification) {
-  const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
-  toast(/* @__PURE__ */ jsx2(ToastContent, { notification }), {
-    type: variant,
-    toastId: notification.id,
-    icon: false
-  });
-}
-var ToastContent = ({ notification }) => {
-  const { title, content, action } = notification;
-  const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
-  const { Icon, color } = TOAST_ICON_BY_VARIANT[variant];
-  const handleActionClick = async () => {
-    if (!action) return;
-    try {
-      await action.onClick?.();
-    } catch (error) {
-      console.error("Notification action failed", error);
-    } finally {
-      toast.dismiss(notification.id);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "toast-content flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx2(
-        Icon,
-        {
-          className: "h-4 w-4 shrink-0",
-          style: { color },
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx2("span", { className: "font-semibold", children: title })
-    ] }),
-    (content || action) && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
-      content && /* @__PURE__ */ jsx2("span", { className: "flex-1 text-sm text-muted-foreground", children: content }),
-      action && /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          className: "toast-action text-sm font-medium ml-auto shrink-0 self-end",
-          onClick: handleActionClick,
-          children: action.label
-        }
-      )
-    ] })
-  ] });
-};
 
 // src/util/responsive-query/use-responsive-mutation.ts
 function useResponsiveMutation(responsiveMutation, queryClient) {
@@ -281,9 +471,8 @@ export {
   DEFAULT_NOTIFICATION_CHANNEL,
   NotificationHost,
   NotifierController,
-  NotifierProvider,
   notifierController,
+  resolveToastTheme,
   ui,
-  useNotifierController,
   useResponsiveMutation
 };

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "files": [
     "dist"

package/dist/index.css

@@ -1,79 +0,0 @@
-/* src/feature/notifier/infra/web/react/notification-host.css */
-@layer base {
-  .custom-toast-container {
-    --toastify-color-light: var(--surface-3);
-    --toastify-text-color-light: var(--text-1);
-    --toastify-color-progress-light: color-mix(in oklab, var(--accent-high), transparent 30%);
-    --toastify-color-dark: var(--surface-1);
-    --toastify-text-color-dark: var(--text-1);
-    --toastify-color-progress-dark: color-mix(in oklab, var(--accent-high), transparent 30%);
-    --toastify-color-progress-info: color-mix(in oklab, var(--accent), transparent 30%);
-    --toastify-color-progress-success: color-mix(in oklab, var(--success), transparent 30%);
-    --toastify-color-progress-warning: color-mix(in oklab, var(--warning), transparent 30%);
-    --toastify-color-progress-error: color-mix(in oklab, var(--danger), transparent 30%);
-    --toastify-toast-width: min(24rem, calc(100vw - 2rem));
-  }
-}
-@supports (color-mix(in oklab, white, transparent)) {
-  @layer base {
-    .custom-toast-container {
-    }
-  }
-}
-@layer components {
-  .toast-content {
-    padding: 0.5rem 0.75rem 1rem 0.5rem;
-  }
-  .toast-action {
-    align-self: flex-start;
-    padding: 0.35rem 0.75rem;
-    border-radius: var(--shape-radius-btn);
-    background: color-mix(in oklab, var(--secondary-3), transparent 30%);
-    color: var(--color-contrast-inverted);
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease,
-      transform 0.2s ease;
-  }
-  .toast-action:hover {
-    background: var(--secondary-3);
-    color: var(--contrast-inverted);
-  }
-  .toast-action:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
-    transform: translateY(-1px);
-  }
-  .toast-action:active {
-    transform: translateY(0);
-  }
-}
-@keyframes slideIn {
-  from {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slideOut {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-}
-.slideIn {
-  animation: slideIn 0.35s forwards;
-}
-.slideOut {
-  animation: slideOut 0.25s forwards;
-}