@rackbops/ui-react 0.2.38 → 0.2.40

package/dist/Toast.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type RefAttributes } from "react";
+import type { SemanticVariant } from "./feedback.js";
+export interface ToastProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    /** Maps to `.rb-toast--{variant}` and picks the live-region role: `info`/`success`
+     * announce politely (`role="status"`), `warning`/`danger` assertively
+     * (`role="alert"`). Omitted, the toast is polite and carries no variant class. */
+    variant?: SemanticVariant;
+    /**
+     * When provided, renders a keyboard-focusable dismiss button (`.rb-toast__close`)
+     * that calls this. Omit for a toast the consumer removes on its own timer -- the
+     * primitive owns no queue or timer (the consumer does, as artifact-console's
+     * `useToasts` already did). A toast is never the only place an error is reported.
+     */
+    onDismiss?: () => void;
+    /** `aria-label` for the dismiss button; default `"Dismiss"`. */
+    dismissLabel?: string;
+}
+/**
+ * A transient notice (`.rb-toast`), rendered inside a `ToastRegion` stack. Its
+ * live-region role is chosen by `variant` (see above), so it announces once on
+ * insertion; the region itself is not a live region (that would double-announce).
+ *
+ * Entrance is a CSS transition, not a keyframe: the toast mounts with a
+ * `data-rb-enter` from-state that is cleared after the first paint so the
+ * transition plays. Under `prefers-reduced-motion` the per-theme
+ * `--rb-transition: 0s` token collapse makes it appear instantly -- it loses only
+ * its transition, nothing else.
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export interface ToastRegionProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+}
+/**
+ * The fixed stacking region (`.rb-toast-region`) that holds Toasts. Deliberately
+ * NOT a live region: each `Toast` announces itself (role by variant), and a polite
+ * region wrapping assertive children double-announces on some screen readers
+ * (the rule artifact-console's hand-rolled `ToastPortal` already documented).
+ */
+export declare const ToastRegion: import("react").ForwardRefExoticComponent<Omit<ToastRegionProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Toast.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState, } from "react";
+import { cx } from "./cx.js";
+// Role by urgency (#211): info/success are polite confirmations ("Saved"),
+// warning/danger interrupt. A variantless toast defaults to the polite role.
+const ASSERTIVE = new Set(["warning", "danger"]);
+/**
+ * A transient notice (`.rb-toast`), rendered inside a `ToastRegion` stack. Its
+ * live-region role is chosen by `variant` (see above), so it announces once on
+ * insertion; the region itself is not a live region (that would double-announce).
+ *
+ * Entrance is a CSS transition, not a keyframe: the toast mounts with a
+ * `data-rb-enter` from-state that is cleared after the first paint so the
+ * transition plays. Under `prefers-reduced-motion` the per-theme
+ * `--rb-transition: 0s` token collapse makes it appear instantly -- it loses only
+ * its transition, nothing else.
+ */
+export const Toast = forwardRef(function Toast({ variant, onDismiss, dismissLabel = "Dismiss", className, children, ...rest }, ref) {
+    const [entering, setEntering] = useState(true);
+    useEffect(() => {
+        // A single frame after the first paint, drop the from-state so the CSS
+        // transition runs. cancelAnimationFrame on unmount so a toast removed before
+        // the frame fires never calls setState after unmount. Where there is no frame
+        // scheduler (jsdom, SSR-hydration shims, non-visual runtimes -- none of which
+        // paint anyway), show the toast immediately instead of throwing.
+        if (typeof requestAnimationFrame !== "function") {
+            setEntering(false);
+            return;
+        }
+        const id = requestAnimationFrame(() => setEntering(false));
+        return () => cancelAnimationFrame(id);
+    }, []);
+    const role = variant && ASSERTIVE.has(variant) ? "alert" : "status";
+    return (_jsxs("div", { ref: ref, role: role, "data-rb-enter": entering ? "" : undefined, className: cx("rb-toast", variant && `rb-toast--${variant}`, className), ...rest, children: [children, onDismiss && (_jsx("button", { type: "button", className: "rb-toast__close", "aria-label": dismissLabel, onClick: onDismiss, children: "×" }))] }));
+});
+Toast.displayName = "Toast";
+/**
+ * The fixed stacking region (`.rb-toast-region`) that holds Toasts. Deliberately
+ * NOT a live region: each `Toast` announces itself (role by variant), and a polite
+ * region wrapping assertive children double-announces on some screen readers
+ * (the rule artifact-console's hand-rolled `ToastPortal` already documented).
+ */
+export const ToastRegion = forwardRef(function ToastRegion({ className, ...rest }, ref) {
+    return _jsx("div", { ref: ref, className: cx("rb-toast-region", className), ...rest });
+});
+ToastRegion.displayName = "ToastRegion";

package/dist/feedback.d.ts

@@ -2,6 +2,12 @@ import { type HTMLAttributes, type ProgressHTMLAttributes, type ReactNode, type
 export type SemanticVariant = "info" | "success" | "warning" | "danger";
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttributes<HTMLSpanElement> {
     variant?: SemanticVariant;
+    /**
+     * Size. "md" maps to .rb-badge--md for a row-text-sized pill (inside a
+     * .rb-table row, next to 13px cell text); "sm" is the default and the
+     * compact chip every existing consumer already renders.
+     */
+    size?: "sm" | "md";
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & RefAttributes<HTMLSpanElement>>;
 export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, RefAttributes<HTMLDivElement> {

package/dist/feedback.js

@@ -7,8 +7,8 @@ function styled(tag, cls, attrs = {}) {
         return createElement(tag, { ref, ...attrs, className: cx(cls, className), ...rest });
     });
 }
-export const Badge = forwardRef(function Badge({ variant, className, ...rest }, ref) {
-    return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, className), ...rest }));
+export const Badge = forwardRef(function Badge({ variant, size = "sm", className, ...rest }, ref) {
+    return (_jsx("span", { ref: ref, className: cx("rb-badge", variant && `rb-badge--${variant}`, size === "md" && "rb-badge--md", className), ...rest }));
 });
 Badge.displayName = "Badge";
 /** A status banner (.rb-alert); `role="alert"` announces it to screen readers on mount/update. */

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { NavRail, type NavRailProps, type NavRailItem } from "./NavRail.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, type FieldProps, type ChoiceProps, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SpinnerProps, type SemanticVariant, } from "./feedback.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
+export { Toast, ToastRegion, type ToastProps, type ToastRegionProps } from "./Toast.js";
 export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
 export { Stepper, type StepperProps, type StepperStep } from "./Stepper.js";
 export { DataTable, type DataTableProps, type DataTableColumn } from "./DataTable.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export { NavRail } from "./NavRail.js";
 export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
 export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
 export { Dialog } from "./Dialog.js";
+export { Toast, ToastRegion } from "./Toast.js";
 export { Tabs } from "./Tabs.js";
 export { Stepper } from "./Stepper.js";
 export { DataTable } from "./DataTable.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rackbops/ui-react",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "description": "React components styled by @rackbops/styles rackbops themes.",
   "license": "MIT",
   "repository": {