@octanejs/sonner 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# @octanejs/sonner
+
+[Sonner](https://sonner.emilkowal.ski/) ported to the
+[Octane](https://github.com/octanejs/octane) renderer. The package tracks the
+published `sonner@2.0.7` API and behavior: the callable `toast` API, `Toaster`,
+`useSonner`, promise toasts, multiple toaster targets, actions, themes, rich
+colors, stacking, timers, keyboard focus, and swipe dismissal.
+
+## Install
+
+```bash
+pnpm add @octanejs/sonner
+```
+
+## Usage
+
+Mount one toaster near the root of the application, then call `toast` from any
+event handler or module:
+
+```tsrx
+import { Toaster, toast } from '@octanejs/sonner';
+
+export function App() {
+	return (
+		<main>
+			<button
+				onClick={() =>
+					toast.success('Saved', {
+						description: 'Your changes are live.',
+					})
+				}
+			>
+				Save
+			</button>
+			<Toaster position="top-right" richColors />
+		</main>
+	);
+}
+```
+
+The component imports its default stylesheet automatically. The stylesheet is
+also available explicitly as `@octanejs/sonner/dist/styles.css`.
+
+Promise and custom toasts keep Sonner's API:
+
+```tsrx
+toast.promise(saveProject(), {
+	loading: 'Saving…',
+	success: (project) => `${project.name} saved`,
+	error: 'Could not save the project',
+});
+
+toast.custom((id) => (
+	<div>
+		Custom content
+		<button onClick={() => toast.dismiss(id)}>Dismiss</button>
+	</div>
+));
+```
+
+## Octane adaptations
+
+- Action and cancel handlers receive native `MouseEvent` objects because
+  Octane uses native delegated events.
+- `Toaster` accepts `ref` as a normal prop; Octane does not use `forwardRef`.
+- The document-visibility initializer is guarded for server rendering.
+
+Everything else intentionally follows published `sonner@2.0.7`, including its
+DOM attributes and stylesheet. Differential tests run the same `.tsrx` fixture
+through this package and real Sonner on React and compare the resulting DOM.
+
+See the [port plan](../../docs/sonner-port-plan.md) and generated
+[bindings status](../../docs/bindings-status.md) for scope and evidence.
+
+Sonner is Copyright (c) Emil Kowalski and contributors and distributed under
+the MIT license.

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@octanejs/sonner",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "description": "Sonner for the octane renderer — an API- and behavior-compatible port of the opinionated React toast component.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/sonner"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./src/styles.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./dist/styles.css": "./src/styles.css"
+  },
+  "peerDependencies": {
+    "octane": "0.1.5"
+  },
+  "devDependencies": {
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sonner": "2.0.7",
+    "vitest": "^4.1.9",
+    "octane": "0.1.5"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/assets.tsrx

@@ -0,0 +1,103 @@
+// Ported from sonner@2.0.7 src/assets.tsx.
+import type { ToastTypes } from './types';
+
+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 x1="6" y1="6" x2="18" y2="18" />
+</svg>;
+
+export function getAsset(type: ToastTypes | undefined): any {
+	switch (type) {
+		case 'success':
+			return SuccessIcon;
+		case 'info':
+			return InfoIcon;
+		case 'warning':
+			return WarningIcon;
+		case 'error':
+			return ErrorIcon;
+		default:
+			return null;
+	}
+}
+
+const bars = Array.from({ length: 12 }, (_, index) => index);
+
+export function Loader(props: { visible: boolean; className?: string }) {
+	return <div
+		className={['sonner-loading-wrapper', props.className].filter(Boolean).join(' ')}
+		data-visible={props.visible}
+	>
+		<div className="sonner-spinner">
+			@for (const bar of bars; key bar) {
+				<div className="sonner-loading-bar" />
+			}
+		</div>
+	</div>;
+}

package/src/hooks.tsrx

@@ -0,0 +1,18 @@
+// Ported from sonner@2.0.7 src/hooks.tsx. The guarded initializer is the one
+// deliberate SSR adaptation: Octane's server runtime executes this component,
+// while upstream assumes a client boundary owns it.
+import { useEffect, useState } from 'octane';
+
+export function useIsDocumentHidden(): boolean {
+	const [isDocumentHidden, setIsDocumentHidden] = useState(
+		typeof document === 'undefined' ? false : document.hidden,
+	);
+
+	useEffect(() => {
+		const callback = (): void => setIsDocumentHidden(document.hidden);
+		document.addEventListener('visibilitychange', callback);
+		return () => document.removeEventListener('visibilitychange', callback);
+	}, []);
+
+	return isDocumentHidden;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// @octanejs/sonner — Sonner 2.0.7 for the octane renderer.
+//
+// The renderer is authored in `.tsrx` so Octane's compiler owns component
+// templates and hook slots. The imperative observer/store remains plain
+// TypeScript and intentionally mirrors upstream's state machine.
+export { toast, Toaster, useSonner } from './sonner.tsrx';
+export type { ExternalToast, ToastT, ToasterProps } from './types';
+export type { ToastClassnames, ToastToDismiss, Action } from './types';