@apliteni/apliteni-ui 0.47.0 → 0.49.0

package/package.json

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

package/react/README.md

@@ -28,7 +28,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Icon`.
+Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
 
 `Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
@@ -42,6 +42,15 @@ can try again or select the text manually.
 Before a reveal snippet, explain that the secret is stored hashed and will not be
 shown again, and ask the reader to copy it now. The page decides when to remove it.
 
+`Callout` accepts `children`, optional `actions`, and an `icon` override. `neutral` is the default.
+The other variants are `info`, `success`, `warn`, and `danger`. Only `danger` uses `role="alert"`.
+
+```tsx
+<Callout variant="warn" actions={<Button size="sm">Review period</Button>}>
+  <b>Incomplete.</b> This period is still open.
+</Callout>
+```
+
 `Button` accepts `size="xs" | "sm" | "md" | "lg"` (default `md`). Use `xs`
 for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconOnly>Copy</Button>`.
 Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use
@@ -407,3 +416,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

@@ -41,6 +41,15 @@ declare function Card({ title, sub, level, children }: {
     children?: ReactNode;
 }): react.JSX.Element;
 
+type CalloutVariant = 'neutral' | 'info' | 'success' | 'warn' | 'danger';
+interface CalloutProps {
+    variant?: CalloutVariant;
+    icon?: string;
+    children: ReactNode;
+    actions?: ReactNode;
+}
+declare function Callout({ variant, icon, children, actions }: CalloutProps): react.JSX.Element;
+
 type StatTone = 'good' | 'bad' | 'neutral';
 type StatVariant = 'band' | 'tiles' | 'open';
 interface StatDelta {
@@ -526,7 +535,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, Callout, type CalloutProps, type CalloutVariant, 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 };