@apliteni/apliteni-ui 0.47.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -407,3 +407,20 @@ native control props. `SelectField` accepts option children.
 `FileField` accepts one file from a picker or a drop and reports it through
 `onFileChange`. Use `accept` and `hint` to describe allowed file types and size.
 Your application must validate files before upload.
+
+## Toast
+
+Wrap your app in `Toast`, then call `useToast()` inside it to add a notice.
+Pass `title`, optional `text`, and a `tone`: success (default), danger, warn, info,
+or neutral. Notices disappear after five seconds, pausing while hovered or focused.
+Danger notices are announced assertively; other tones are polite. An `action` with a `label` and
+`onClick` stays until selected or dismissed. New notices appear at the bottom.
+
+```tsx
+function SaveButton() {
+  const push = useToast();
+  return <Button onClick={() => push({ title: 'Saved', text: 'Your changes were saved.' })}>Save</Button>;
+}
+
+<Toast><SaveButton /></Toast>
+```

package/react/dist/index.css

@@ -512,3 +512,16 @@
 .ui-file.is-disabled .ui-file__input {
   cursor: not-allowed;
 }
+
+/* src/Toast.css */
+.rx-toast-stack {
+  position: fixed;
+  right: var(--space-4);
+  bottom: var(--space-4);
+  max-width: calc(100% - 2 * var(--space-4));
+  z-index: var(--z-toast);
+  pointer-events: none;
+}
+.rx-toast-stack > .ui-toast {
+  pointer-events: auto;
+}

package/react/dist/index.d.ts

@@ -526,7 +526,22 @@ type FileFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>,
 };
 declare function FileField({ label, hint, error, required, disabled, onFileChange, className, ...props }: FileFieldProps): react.JSX.Element;
 
+type ToastNotice = {
+    tone?: 'success' | 'danger' | 'warn' | 'info' | 'neutral';
+    title: string;
+    text?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+type ToastProps = {
+    children: ReactNode;
+};
+declare function useToast(): (notice: ToastNotice) => void;
+declare function Toast({ children }: ToastProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Timeline, type TimelineEvent, type TimelineProps, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Timeline, type TimelineEvent, type TimelineProps, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -2026,6 +2026,119 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
   ) });
 }
 
+// src/Toast.tsx
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect8, useRef as useRef13, useState as useState8 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var Context = createContext2(null);
+var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
+function useToast() {
+  const push = useContext2(Context);
+  if (!push) throw new Error("useToast requires a Toast provider");
+  return push;
+}
+function Notice({ notice, remove }) {
+  const root = useRef13(null);
+  const [leaving2, setLeaving] = useState8(false);
+  const dismissed = useRef13(false);
+  const remaining = useRef13(5e3);
+  const [hovered, setHovered] = useState8(false);
+  const [focused, setFocused] = useState8(false);
+  const paused = hovered || focused;
+  const tone = notice.tone ?? "success";
+  const dismiss = useCallback3(() => {
+    if (dismissed.current) return;
+    dismissed.current = true;
+    if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) remove();
+    else setLeaving(true);
+  }, [remove]);
+  useEffect8(() => {
+    if (leaving2) {
+      const element = root.current;
+      const finish = (event) => {
+        if (event.target === element) remove();
+      };
+      element?.addEventListener("animationend", finish);
+      const timer = setTimeout(remove, 260);
+      return () => {
+        clearTimeout(timer);
+        element?.removeEventListener("animationend", finish);
+      };
+    }
+  }, [leaving2, remove]);
+  useEffect8(() => {
+    if (leaving2 || notice.action || paused) return;
+    const started = Date.now();
+    const timer = setTimeout(dismiss, remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [dismiss, leaving2, notice.action, paused]);
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      ref: root,
+      className: `ui-toast ui-toast--${tone} ui-toast--soft${leaving2 ? " is-leaving" : ""}`,
+      role: tone === "danger" ? "alert" : "status",
+      "aria-live": tone === "danger" ? "assertive" : "polite",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx23("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx23(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs19("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx23("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx23("div", { className: "ui-toast__text", children: notice.text })
+        ] }),
+        notice.action && /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            className: "ui-toast__action",
+            disabled: leaving2,
+            onClick: () => {
+              if (!dismissed.current) {
+                dismiss();
+                notice.action.onClick();
+              }
+            },
+            children: notice.action.label
+          }
+        ),
+        /* @__PURE__ */ jsx23("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx23(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx23(
+          "span",
+          {
+            className: "ui-toast__timer is-running",
+            "aria-hidden": "true",
+            style: { animationPlayState: paused ? "paused" : "running" }
+          }
+        )
+      ]
+    }
+  );
+}
+function Toast({ children }) {
+  const [entries, setEntries] = useState8([]);
+  const nextId = useRef13(0);
+  const push = useCallback3((notice) => {
+    const id = nextId.current++;
+    const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
+    setEntries((current) => [...current, { id, notice, remove }]);
+  }, []);
+  return /* @__PURE__ */ jsxs19(Context.Provider, { value: push, children: [
+    children,
+    typeof document !== "undefined" && createPortal4(
+      /* @__PURE__ */ jsx23("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx23(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      document.body
+    )
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -2063,5 +2176,7 @@ export {
   TextArea,
   TextField,
   Timeline,
-  sortTableRows
+  Toast,
+  sortTableRows,
+  useToast
 };