@enigmax/primitives 0.20.0 → 0.22.0

package/registry.json

@@ -711,16 +711,17 @@
     {
       "name": "toast",
       "title": "Toast",
-      "description": "The notification queue with a renderer on top: stacking, swipe to dismiss, a pointer that stops the clock, and a toast that is still on screen while it animates out. Ships the Ember theme, which is a stylesheet you own.",
+      "description": "The notification queue with a renderer on top: the newest toast in front, the older ones stacked behind it and fanning out when the pointer arrives, swipe to dismiss, a pointer that stops the clock, and a toast that is still on screen while it animates out. It brings its own theme - a toast at the edge of the screen is the one component a forgotten stylesheet ruins rather than merely undresses.",
       "targets": [
         "react"
       ],
       "entry": {
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/toast"
       },
       "exports": {
         "react": [
           "Toaster",
+          "toast",
           "useNotifications"
         ]
       },
@@ -743,16 +744,60 @@
           }
         },
         {
-          "path": "src/react/toaster.tsx",
-          "dest": "toast/index.tsx",
-          "main": true,
+          "path": "src/react/toast/types.ts",
+          "dest": "toast/vendor/types.ts",
           "targets": [
             "react"
-          ],
-          "rewrite": {
-            "@/core/notifications": "./notifications",
-            "@/react/use-notifications": "./use-notifications"
-          }
+          ]
+        },
+        {
+          "path": "src/react/toast/hooks.ts",
+          "dest": "toast/vendor/hooks.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/cn.ts",
+          "dest": "toast/vendor/cn.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/assets.tsx",
+          "dest": "toast/vendor/assets.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/state.ts",
+          "dest": "toast/vendor/state.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/styles.ts",
+          "dest": "toast/vendor/styles.ts",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/index.tsx",
+          "dest": "toast/vendor/index.tsx",
+          "targets": [
+            "react"
+          ]
+        },
+        {
+          "path": "src/react/toast/NOTICE",
+          "dest": "toast/vendor/NOTICE",
+          "targets": [
+            "react"
+          ]
         },
         {
           "path": "recipes/toast/styles.css",
@@ -763,30 +808,38 @@
           "style": "css"
         },
         {
-          "path": "recipes/toast/tailwind.tsx",
-          "dest": "toast/AppToaster.tsx",
+          "path": "src/react/toaster.tsx",
+          "dest": "toast/index.tsx",
+          "main": true,
           "targets": [
             "react"
           ],
-          "style": "tailwind",
           "rewrite": {
-            "@enigmax/utils/react": "./index"
+            "@/react/toast/styles": "./vendor/styles",
+            "@/react/toast/state": "./vendor/state",
+            "@/react/toast/index": "./vendor/index",
+            "@/react/toast/types": "./vendor/types",
+            "@/react/use-notifications": "./use-notifications",
+            "@/core/notifications": "./notifications"
           }
         }
       ],
-      "styles": false,
+      "styles": true,
       "themeHooks": [
-        "[data-enigma-toaster]",
-        "[data-enigma-toaster][data-position]",
-        "[data-enigma-toast]",
-        "[data-enigma-toast][data-tone=error]",
-        "[data-enigma-toast][data-state=leaving]",
-        "[data-enigma-toast][data-swiping]",
-        "[data-enigma-toast][data-front]",
-        "[data-enigma-toast-title]",
-        "[data-enigma-toast-body]",
-        "[data-enigma-toast-action]",
-        "[data-enigma-toast-close]"
+        "[data-toastcmp-toaster]",
+        "[data-toastcmp-toaster][data-theme]",
+        "[data-toastcmp-toaster][data-lifted]",
+        "[data-toastcmp-toast]",
+        "[data-toastcmp-toast][data-type=error]",
+        "[data-toastcmp-toast][data-front]",
+        "[data-toastcmp-toast][data-mounted]",
+        "[data-toastcmp-toast][data-removed]",
+        "[data-toastcmp-toast][data-swiping]",
+        "[data-title]",
+        "[data-description]",
+        "[data-button]",
+        "[data-close-button]",
+        "[data-icon]"
       ],
       "docs": "docs/notes/primitives.md#toast",
       "recipes": [

package/src/core/search.ts

@@ -19,7 +19,12 @@ export interface SearchMatch<T> {
 
 /** The shape of Fuse's constructor, declared here so the package need not depend on it. */
 export interface FuseLike<T> {
-    search(query: string): { item: T; score?: number; matches?: { key?: string; }[]; }[];
+    /**
+     * Readonly arrays, because Fuse's own signature returns them - and a mutable array is
+     * not assignable to one, so the stricter shape made `fuse={Fuse}` a type error at the
+     * call site while working perfectly at runtime.
+     */
+    search(query: string): readonly { item: T; score?: number; matches?: readonly { key?: string; }[]; }[];
 }
 export type FuseConstructor = new <T>(items: readonly T[], options?: Record<string, unknown>) => FuseLike<T>;
 

package/src/react/index.ts

@@ -36,7 +36,8 @@ export {
     type PasswordScore
 } from "@/core/password";
 export { useNotifications, createNotificationQueue, defaultQueue, type UseNotificationsResult } from "@/react/use-notifications";
-export { Toaster, type ToasterProps, type ToastPosition, type ToastControls } from "@/react/toaster";
+export { Toaster, toast, useSonner, type ToasterProps } from "@/react/toaster";
+export type { ToastT, ExternalToast, ToastClassnames, Action } from "@/react/toast/types";
 export { useNetworkState } from "@/react/use-network-state";
 export { type NetworkState } from "@/core/network";
 export { RelativeTime, type RelativeTimeProps } from "@/react/relative-time";

package/src/react/toast/NOTICE

@@ -0,0 +1,20 @@
+The files in this directory are vendored, not written here.
+
+They are the toast component from TPEOficial/dymo-saas
+(src/components/internal/toast), itself derived from Sonner
+(https://github.com/emilkowalski/sonner, MIT, Emil Kowalski), and they are kept
+as close to verbatim as a library can keep them so the toast looks the same
+everywhere it is used.
+
+Three mechanical changes were unavoidable, and they are the only ones:
+
+  - `@/utils/cn` became `./cn`, a two-line local file: a package cannot resolve a
+    consumer's path alias.
+  - `import "./styles.css"` was removed. The stylesheet lives in `styles.ts` as a
+    string and `<Toaster />` injects it, because a package cannot assume its
+    consumer has a CSS-capable bundler - and a toast at the edge of the screen is
+    the one component a forgotten import ruins rather than merely undresses.
+  - `JSX.Element` became `React.JSX.Element` in assets.tsx, which is where React
+    19's types put it.
+
+Refresh them from upstream rather than editing them here.

package/src/react/toast/assets.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React from "react";
+import type { ToastTypes } from "./types";
+
+export const getAsset = (type: ToastTypes): React.JSX.Element | null => {
+    switch (type) {
+        case "success": return SuccessIcon;
+        case "info": return InfoIcon;
+        case "warning": return WarningIcon;
+        case "error": return ErrorIcon;
+        default: return null;
+    }
+};
+
+const bars = Array(12).fill(0);
+
+export const Loader = ({ visible, className }: { visible: boolean, className?: string }) => {
+    return (
+        <div className={["toastcmp-loading-wrapper", className].filter(Boolean).join(" ")} data-visible={visible}>
+            <div className="toastcmp-spinner">
+                {bars.map((_, i) => (
+                    <div className="toastcmp-loading-bar" key={`spinner-bar-${i}`} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+const SuccessIcon = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+        <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const WarningIcon = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="20" width="20">
+        <path
+            fillRule="evenodd"
+            d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const InfoIcon = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+        <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+const ErrorIcon = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+        <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const CloseIcon = (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+);

package/src/react/toast/cn.ts

@@ -0,0 +1,10 @@
+/**
+ * The class-name joiner the vendored component imports.
+ *
+ * Its own file, and two lines, because the alternative is editing the component: everything
+ * in this directory is upstream's, kept as close to verbatim as a library can keep it, and
+ * one helper is a cheaper thing to supply than a diff to maintain.
+ */
+export function cn(...classes: (string | undefined | null | false)[]): string {
+    return classes.filter(Boolean).join(" ");
+}

package/src/react/toast/hooks.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const useIsDocumentHidden = () => {
+    const [isDocumentHidden, setIsDocumentHidden] = React.useState(document.hidden);
+
+    React.useEffect(() => {
+        const callback = () => setIsDocumentHidden(document.hidden);
+        document.addEventListener("visibilitychange", callback);
+        return () => window.removeEventListener("visibilitychange", callback);
+    }, []);
+
+    return isDocumentHidden;
+};