@arun-dev/headless 4.11.0 → 4.13.0

package/dist/toast/index.js

@@ -0,0 +1,262 @@
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/toast/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Action: () => ToastAction,
+  Close: () => ToastClose,
+  Description: () => ToastDescription,
+  Provider: () => ToastProvider,
+  Root: () => ToastRoot,
+  Title: () => ToastTitle,
+  Viewport: () => ToastViewport
+});
+
+// src/toast/ToastProvider.tsx
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+
+// src/toast/ToastContext.ts
+import { createContext, useContext } from "react";
+var ToastContext = createContext(null);
+function useToastContext(part) {
+  const context = useContext(ToastContext);
+  if (context === null) {
+    throw new Error(`${part} must be used inside <Toast.Provider>.`);
+  }
+  return context;
+}
+function useToastManager() {
+  const { toasts, add, update, close } = useToastContext("useToastManager()");
+  return { toasts, add, update, close };
+}
+var ToastRootContext = createContext(null);
+function useToastRootContext(part) {
+  const toast = useContext(ToastRootContext);
+  if (toast === null) {
+    throw new Error(`<Toast.${part}> must be rendered inside <Toast.Root>.`);
+  }
+  return toast;
+}
+
+// src/toast/ToastProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function ToastProvider({ limit = 3, timeout = 5e3, children }) {
+  const [all, setAll] = useState([]);
+  const prefix = useId();
+  const counter = useRef(0);
+  const closedRef = useRef(/* @__PURE__ */ new Set());
+  const add = useCallback(
+    (options) => {
+      const id = options.id ?? `${prefix}-${++counter.current}`;
+      const toast = {
+        ...options,
+        id,
+        timeout: options.timeout ?? timeout,
+        priority: options.priority ?? "low"
+      };
+      closedRef.current.delete(id);
+      setAll((current) => [...current.filter((t) => t.id !== id), toast]);
+      return id;
+    },
+    [prefix, timeout]
+  );
+  const update = useCallback((id, patch) => {
+    setAll(
+      (current) => current.map((t) => t.id === id ? { ...t, ...patch, id } : t)
+    );
+  }, []);
+  const close = useCallback((id) => {
+    setAll((current) => {
+      const toast = current.find((t) => t.id === id);
+      if (toast && !closedRef.current.has(id)) {
+        closedRef.current.add(id);
+        queueMicrotask(() => toast.onClose?.());
+      }
+      return current.filter((t) => t.id !== id);
+    });
+  }, []);
+  const [pointerInside, setPointerInside] = useState(false);
+  const [focusInside, setFocusInside] = useState(false);
+  const [pageHidden, setPageHidden] = useState(false);
+  useEffect(() => {
+    const onVisibility = () => setPageHidden(document.visibilityState === "hidden");
+    onVisibility();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const viewportRef = useRef(null);
+  const toasts = useMemo(() => all.slice(-limit), [all, limit]);
+  const context = useMemo(
+    () => ({
+      toasts,
+      add,
+      update,
+      close,
+      paused: pointerInside || focusInside || pageHidden,
+      setPointerInside,
+      setFocusInside,
+      viewportRef
+    }),
+    [toasts, add, update, close, pointerInside, focusInside, pageHidden]
+  );
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: context, children });
+}
+
+// src/toast/ToastViewport.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+function ToastViewport({ className, children, render, ...rest }) {
+  const { toasts, viewportRef, setPointerInside, setFocusInside } = useToastContext("<Toast.Viewport>");
+  const elementRef = useRef2(null);
+  const newest = toasts.at(-1)?.id;
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    viewportRef.current = element;
+    if (!element || typeof element.showPopover !== "function") return;
+    if (element.matches(":popover-open")) element.hidePopover();
+    element.showPopover();
+  }, [newest, viewportRef]);
+  return useRender({
+    render,
+    defaultTagName: "section",
+    props: {
+      popover: "manual",
+      "aria-label": "Notifications",
+      "aria-live": "polite",
+      tabIndex: -1,
+      className,
+      ref: elementRef,
+      children: typeof children === "function" ? children(toasts) : children,
+      onPointerEnter() {
+        setPointerInside(true);
+      },
+      onPointerLeave() {
+        setPointerInside(false);
+      },
+      onFocus() {
+        setFocusInside(true);
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (!next || !event.currentTarget.contains(next)) setFocusInside(false);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastRoot.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ToastRoot({ toast, className, children, render, ...rest }) {
+  const { close, paused, viewportRef } = useToastContext("<Toast.Root>");
+  const elementRef = useRef3(null);
+  const { id, timeout } = toast;
+  const remaining = useRef3(timeout);
+  const lastTimeout = useRef3(timeout);
+  if (lastTimeout.current !== timeout) {
+    lastTimeout.current = timeout;
+    remaining.current = timeout;
+  }
+  useEffect2(() => {
+    if (paused || timeout <= 0) return;
+    const started = Date.now();
+    const timer = setTimeout(() => close(id), remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [paused, timeout, id, close]);
+  const focusInside = useRef3(false);
+  useEffect2(
+    () => () => {
+      if (focusInside.current) viewportRef.current?.focus();
+    },
+    [viewportRef]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: toast.priority === "high" ? "alert" : void 0,
+      "aria-atomic": true,
+      "data-type": toast.type,
+      className,
+      children,
+      ref: elementRef,
+      onFocus() {
+        focusInside.current = true;
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (!next || !event.currentTarget.contains(next)) focusInside.current = false;
+      },
+      onKeyDown(event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          close(id);
+        }
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx2(ToastRootContext.Provider, { value: toast, children: element });
+}
+
+// src/toast/ToastTitle.tsx
+function ToastTitle({ className, children, render, ...rest }) {
+  const toast = useToastRootContext("Title");
+  return useRender({
+    render,
+    defaultTagName: "p",
+    props: { className, children: children ?? toast.title },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastDescription.tsx
+function ToastDescription({ className, children, render, ...rest }) {
+  const toast = useToastRootContext("Description");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { className, children: children ?? toast.description },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastAction.tsx
+function ToastAction({ className, children, render, ...rest }) {
+  useToastRootContext("Action");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: { type: "button", className, children },
+    consumerProps: rest
+  });
+}
+
+// src/toast/ToastClose.tsx
+function ToastClose({ className, children, render, ...rest }) {
+  const { close } = useToastContext("<Toast.Close>");
+  const { id } = useToastRootContext("Close");
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      className,
+      children,
+      onClick() {
+        close(id);
+      }
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as Toast,
+  useToastManager
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",
@@ -104,6 +104,26 @@
         "default": "./dist/radio-group/index.cjs"
       }
     },
+    "./field": {
+      "import": {
+        "types": "./dist/field/index.d.ts",
+        "default": "./dist/field/index.js"
+      },
+      "require": {
+        "types": "./dist/field/index.d.cts",
+        "default": "./dist/field/index.cjs"
+      }
+    },
+    "./toast": {
+      "import": {
+        "types": "./dist/toast/index.d.ts",
+        "default": "./dist/toast/index.js"
+      },
+      "require": {
+        "types": "./dist/toast/index.d.cts",
+        "default": "./dist/toast/index.cjs"
+      }
+    },
     "./switch": {
       "import": {
         "types": "./dist/switch/index.d.ts",