@kennycorrea/ui 0.2.0 → 0.3.0

package/README.md

@@ -237,3 +237,23 @@ worth doing as its own commit rather than inside this one.
 ⚠ **A `file:` install was a symlink; a version install is a copy.** Edits here no longer appear in
 a consumer. An app that needs an unreleased change wants `npm link` or a temporary `file:`
 override — never a copied file, which is the drift this package exists to end.
+
+## Toasts — 0.3.0
+
+Mount `<Toaster />` once, inside `<Theme>`, and call `toast()` from anywhere — it is a factory
+over a module-level store, so each call stacks another toast and returns its id.
+
+```tsx
+<Toaster duration={5000} position="bottom-right" />
+
+toast({ title: 'Saved' });                                    // info by default
+toast.success({ title: 'Booking moved', description: 'Tue 14:30' });
+toast.warning({ title: 'Close to the IVA ceiling', duration: 10_000 });
+const id = toast.error({ title: 'Payment failed', duration: Infinity });
+toast.info({ title: 'Cancelled', action: { label: 'Undo', onClick: restore } });
+toast.dismiss(id); // or toast.dismiss() for all
+```
+
+`duration` overrides the `Toaster` default per toast. An action closes the toast after its
+`onClick` unless `keepOpen` is set. Passing an existing `id` replaces that toast in place.
+The close button's name comes from `UiStrings.dismiss`, so feed it through `UiStringsProvider`.

package/dist/atoms/Icon/Icon.d.ts

@@ -31,6 +31,10 @@ declare const PATHS: {
     readonly 'close-circle': "M12 21a9 9 0 100-18 9 9 0 000 18zM9.5 9.5l5 5M14.5 9.5l-5 5";
     readonly 'chevron-up': "M6 15l6-6 6 6";
     readonly 'chevron-down': "M6 9l6 6 6-6";
+    readonly 'check-circle': "M12 21a9 9 0 100-18 9 9 0 000 18zM8.5 12.5l2.5 2.5 4.5-5";
+    readonly warning: "M12 3l10 18H2zM12 10v4M12 17.5v.01";
+    readonly error: "M12 21a9 9 0 100-18 9 9 0 000 18zM12 7.5v5M12 16v.01";
+    readonly info: "M12 21a9 9 0 100-18 9 9 0 000 18zM12 11v5M12 8v.01";
 };
 export type IconName = keyof typeof PATHS;
 export interface IconProps {

package/dist/atoms/Icon/Icon.js

@@ -37,6 +37,11 @@ const PATHS = {
     // section both point along the axis the content moves in.
     'chevron-up': 'M6 15l6-6 6 6',
     'chevron-down': 'M6 9l6 6 6-6',
+    // The four toast types: each a shape that reads without its colour.
+    'check-circle': 'M12 21a9 9 0 100-18 9 9 0 000 18zM8.5 12.5l2.5 2.5 4.5-5',
+    warning: 'M12 3l10 18H2zM12 10v4M12 17.5v.01',
+    error: 'M12 21a9 9 0 100-18 9 9 0 000 18zM12 7.5v5M12 16v.01',
+    info: 'M12 21a9 9 0 100-18 9 9 0 000 18zM12 11v5M12 8v.01',
 };
 export function Icon({ name, className, label }) {
     return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: cn('size-5 shrink-0', className), "aria-hidden": label ? undefined : true, role: label ? 'img' : undefined, "aria-label": label, children: _jsx("path", { d: PATHS[name] }) }));

package/dist/atoms/Toast/Toast.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+export type ToastType = 'success' | 'warning' | 'error' | 'info';
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+    /**
+     * Leaves the toast open after the click. Closing is the default because nearly every
+     * toast action ("Undo", "View") is finished the moment it is pressed.
+     */
+    keepOpen?: boolean;
+}
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Defaults to `info`. */
+    type?: ToastType;
+    /**
+     * Milliseconds before it closes on its own, overriding the `<Toaster>` default.
+     * `Infinity` keeps it until dismissed — right for an error the user has to read.
+     */
+    duration?: number;
+    action?: ToastAction;
+    /** Reusing an id replaces that toast in place rather than stacking a second one. */
+    id?: string;
+}
+declare function show(options: ToastOptions): string;
+type Shorthand = (options: Omit<ToastOptions, 'type'>) => string;
+/**
+ * The factory. Each call stacks a new toast and returns its id.
+ *
+ *     toast({ title: 'Saved' });
+ *     toast.error({ title: 'Payment failed', duration: Infinity });
+ *     toast.success({ title: 'Booking cancelled', action: { label: 'Undo', onClick: restore } });
+ *     toast.dismiss(id);
+ */
+export declare const toast: typeof show & {
+    success: Shorthand;
+    warning: Shorthand;
+    error: Shorthand;
+    info: Shorthand;
+    /** Closes one toast, or every toast when called with no id. */
+    dismiss(id?: string): void;
+};
+export interface ToasterProps {
+    /** Milliseconds a toast stays when it was not given its own `duration`. */
+    duration?: number;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** The landmark name screen readers announce, e.g. "Notificações ({hotkey})". */
+    label?: string;
+}
+/**
+ * Renders the stack. Mount once, inside `<Theme>` so the toasts take the app's palette.
+ *
+ * Built on Radix's toast primitive rather than Themes, which has none: that is what gives the
+ * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
+ * dismiss.
+ */
+export declare function Toaster({ duration, position, label }: ToasterProps): import("react").JSX.Element;
+export {};

package/dist/atoms/Toast/Toast.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixToast from '@radix-ui/react-toast';
+import { useSyncExternalStore } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../Icon/Icon.js';
+/**
+ * A module-level store, so `toast()` can be called from anywhere — an event handler, a
+ * mutation's `onError`, a store action — without threading a hook through to it.
+ *
+ * One store per bundle is the intent: an app renders exactly one `<Toaster>`. Two would show
+ * every toast twice, which is a mistake to fix in the app rather than to guard against here.
+ */
+let records = [];
+const listeners = new Set();
+let counter = 0;
+function emit(next) {
+    records = next;
+    for (const listener of listeners)
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+function show(options) {
+    const id = options.id ?? `toast-${++counter}`;
+    const record = { ...options, id, type: options.type ?? 'info', open: true };
+    const exists = records.some((r) => r.id === id);
+    emit(exists ? records.map((r) => (r.id === id ? record : r)) : [...records, record]);
+    return id;
+}
+/**
+ * The factory. Each call stacks a new toast and returns its id.
+ *
+ *     toast({ title: 'Saved' });
+ *     toast.error({ title: 'Payment failed', duration: Infinity });
+ *     toast.success({ title: 'Booking cancelled', action: { label: 'Undo', onClick: restore } });
+ *     toast.dismiss(id);
+ */
+export const toast = Object.assign(show, {
+    success: ((o) => show({ ...o, type: 'success' })),
+    warning: ((o) => show({ ...o, type: 'warning' })),
+    error: ((o) => show({ ...o, type: 'error' })),
+    info: ((o) => show({ ...o, type: 'info' })),
+    /** Closes one toast, or every toast when called with no id. */
+    dismiss(id) {
+        emit(records.map((r) => (id === undefined || r.id === id ? { ...r, open: false } : r)));
+    },
+});
+/** Removed after the close animation, not at close, or the exit would be cut off. */
+function remove(id) {
+    emit(records.filter((r) => r.id !== id));
+}
+/**
+ * Themes' colour vocabulary, matching `Badge`: `data-accent-color` re-points `--accent-*` at
+ * that scale for the subtree, so the stripe and icon need no colour of their own.
+ */
+const TYPES = {
+    success: { color: 'jade', icon: 'check-circle' },
+    warning: { color: 'amber', icon: 'warning' },
+    error: { color: 'red', icon: 'error' },
+    info: { color: 'blue', icon: 'info' },
+};
+const POSITIONS = {
+    'top-right': 'top-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-right': 'bottom-0 right-0 flex-col-reverse',
+    'bottom-left': 'bottom-0 left-0 flex-col-reverse',
+};
+/**
+ * Renders the stack. Mount once, inside `<Theme>` so the toasts take the app's palette.
+ *
+ * Built on Radix's toast primitive rather than Themes, which has none: that is what gives the
+ * stack its live-region announcements, the F8 hotkey to reach it, pause-on-hover and swipe to
+ * dismiss.
+ */
+export function Toaster({ duration = 5000, position = 'bottom-right', label }) {
+    const items = useSyncExternalStore(subscribe, () => records, () => records);
+    const strings = useUiStrings();
+    const swipeDirection = position.endsWith('left') ? 'left' : 'right';
+    return (_jsxs(RadixToast.Provider, { duration: duration, swipeDirection: swipeDirection, label: label, children: [items.map((item) => {
+                const { color, icon } = TYPES[item.type];
+                return (_jsxs(RadixToast.Root, { open: item.open, duration: item.duration, type: item.type === 'error' ? 'foreground' : 'background', onOpenChange: (open) => {
+                        if (!open)
+                            toast.dismiss(item.id);
+                    }, onAnimationEnd: () => {
+                        if (!item.open)
+                            remove(item.id);
+                    }, "data-accent-color": color, className: "ui-toast panel pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden py-3 pr-3 pl-4", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-1 bg-[var(--accent-9)]" }), _jsx(Icon, { name: icon, className: "mt-0.5 text-[var(--accent-11)]" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixToast.Title, { className: "text-sm font-medium text-ink", children: item.title }), item.description ? (_jsx(RadixToast.Description, { className: "mt-0.5 text-sm text-ink-muted", children: item.description })) : null] }), item.action ? (_jsx(RadixToast.Action, { altText: item.action.label, onClick: (event) => {
+                                item.action?.onClick();
+                                if (item.action?.keepOpen)
+                                    event.preventDefault();
+                            }, className: cn('shrink-0 rounded-md px-2 py-1 text-sm font-medium', 'text-[var(--accent-11)] hover:bg-[var(--accent-a3)]'), children: item.action.label })) : null, _jsx(RadixToast.Close, { "aria-label": strings.dismiss, className: "shrink-0 rounded-md p-1 text-ink-muted hover:bg-[var(--gray-a3)]", children: _jsx(Icon, { name: "close", className: "size-4" }) })] }, item.id));
+            }), _jsx(RadixToast.Viewport, { className: cn('fixed z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none', POSITIONS[position]) })] }));
+}

package/dist/atoms/Toast/index.d.ts

@@ -0,0 +1 @@
+export * from './Toast.js';

package/dist/atoms/Toast/index.js

@@ -0,0 +1 @@
+export * from './Toast.js';

package/dist/atoms/index.d.ts

@@ -15,4 +15,5 @@ export * from './Separator/index.js';
 export * from './Spinner/index.js';
 export * from './Switch/index.js';
 export * from './Textarea/index.js';
+export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/atoms/index.js

@@ -15,4 +15,5 @@ export * from './Separator/index.js';
 export * from './Spinner/index.js';
 export * from './Switch/index.js';
 export * from './Textarea/index.js';
+export * from './Toast/index.js';
 export * from './Tooltip/index.js';

package/dist/strings.d.ts

@@ -18,6 +18,8 @@ export interface UiStrings {
     loading: string;
     /** The placeholder in a Select that was given none. */
     select: string;
+    /** The accessible name of a toast's close button. */
+    dismiss: string;
 }
 /**
  * Feeds the atoms their strings, once, near the root.

package/dist/strings.js

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 const DEFAULTS = {
     loading: 'Loading',
     select: 'Choose…',
+    dismiss: 'Dismiss',
 };
 const StringsContext = createContext(DEFAULTS);
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",
@@ -33,6 +33,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-toast": "^1.2.23",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0"
   },

package/tokens.css

@@ -238,3 +238,26 @@
      was a blend with nothing to reveal. */
   @apply rounded-2xl bg-sheet shadow-panel ring-1 ring-hairline;
 }
+
+/**
+ * Toast motion. Radix exposes state and swipe through data attributes and CSS variables, and
+ * `Toaster` removes a record on `animationend` — so the closed state must animate, or a
+ * dismissed toast would never leave the store.
+ */
+@keyframes ui-toast-in {
+  from { opacity: 0; transform: translateY(0.5rem); }
+}
+@keyframes ui-toast-out {
+  to { opacity: 0; }
+}
+@keyframes ui-toast-swipe-out {
+  to { transform: translateX(calc(var(--radix-toast-swipe-end-x) + 100%)); opacity: 0; }
+}
+.ui-toast[data-state='open'] { animation: ui-toast-in 180ms ease-out; }
+.ui-toast[data-state='closed'] { animation: ui-toast-out 140ms ease-in forwards; }
+.ui-toast[data-swipe='move'] { transform: translateX(var(--radix-toast-swipe-move-x)); }
+.ui-toast[data-swipe='cancel'] { transform: translateX(0); transition: transform 200ms ease-out; }
+.ui-toast[data-swipe='end'] { animation: ui-toast-swipe-out 120ms ease-out forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .ui-toast[data-state] { animation-duration: 1ms; }
+}