@konstructio/ui 0.1.2-alpha.109 → 0.1.2-alpha.110

package/dist/hooks/useIsHydrated/utils/noop-subscribe/noop-subscribe.js

@@ -0,0 +1,5 @@
+var r = () => () => {
+};
+export {
+  r as noopSubscribe
+};

package/dist/hooks/useMediaQuery.js

@@ -1,4 +1,4 @@
-import { i as n } from "../utils-B-6R7kNE.js";
+import { i as n } from "../utils-DnIJruo0.js";
 import { useEffect as c, useState as h } from "react";
 var m = (e) => n ? window.matchMedia(e).matches : !1, u = (e) => {
   const [s, a] = h(() => m(e));

package/dist/index.js

@@ -1,171 +1,186 @@
-import { t as o } from "./Checkbox-8KnRLpQG.js";
-import { t as m } from "./DropdownButton-LEDrhn1j.js";
-import { t as e } from "./Breadcrumb-MrF1Z6w2.js";
-import { t as a } from "./Input-is8n7emP.js";
-import { t as n } from "./Counter-CDXdP1Af.js";
-import { a as l, t as d } from "./utils-B-6R7kNE.js";
-import { Alert as g } from "./components/Alert/Alert.js";
+import { t as o } from "./Checkbox-CrNxsm3G.js";
+import { t as m } from "./DropdownButton-Blhkj-Oi.js";
+import { t as e } from "./Breadcrumb-CHi5-wVa.js";
+import { t as a } from "./Input-2M2I_H60.js";
+import { t as s } from "./Counter-DN50BVq6.js";
+import { a as l, t as d } from "./utils-DnIJruo0.js";
+import { Alert as u } from "./components/Alert/Alert.js";
 import { Button as c } from "./components/Button/Button.js";
-import { AlertDialog as D } from "./components/AlertDialog/AlertDialog.js";
-import { useClickOutside as R } from "./hooks/useClickOutside.js";
-import { useMediaQuery as V } from "./hooks/useMediaQuery.js";
-import { useToggle as h } from "./hooks/useToggle.js";
-import { Autocomplete as B } from "./components/Autocomplete/Autocomplete.js";
-import { t as E } from "./Loading-DO8JOWBV.js";
-import { Badge as L } from "./components/Badge/Badge.js";
-import { Typography as I } from "./components/Typography/Typography.js";
+import { AlertDialog as S } from "./components/AlertDialog/AlertDialog.js";
+import { useClickOutside as v } from "./hooks/useClickOutside.js";
+import { useIsHydrated as A } from "./hooks/useIsHydrated/useIsHydrated.js";
+import { useMediaQuery as w } from "./hooks/useMediaQuery.js";
+import { useToggle as L } from "./hooks/useToggle.js";
+import { Autocomplete as h } from "./components/Autocomplete/Autocomplete.js";
+import { t as F } from "./Loading-u8hXrFJR.js";
+import { Badge as P } from "./components/Badge/Badge.js";
+import { t as M } from "./Toast-DTb03cfB.js";
+import { Typography as _ } from "./components/Typography/Typography.js";
 import { ButtonGroup as k } from "./components/ButtonGroup/ButtonGroup.js";
-import { Card as y } from "./components/Card/Card.js";
-import { CopyButton as G } from "./components/CopyButton/CopyButton.js";
-import { DatePicker as O } from "./components/Datepicker/DatePicker.js";
-import { Radio as U } from "./components/Radio/Radio.js";
-import { RadioGroup as j } from "./components/RadioGroup/RadioGroup.js";
-import { TimePicker as H } from "./components/TimePicker/TimePicker.js";
-import { DateRangePicker as K } from "./components/DateRangePicker/DateRangePicker.js";
-import { Divider as Y } from "./components/Divider/Divider.js";
-import { Drawer as _ } from "./components/Drawer/Drawer.js";
-import { BadgeMultiSelect as rr } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { CustomDateRangeFilterDropdown as tr } from "./components/Filter/components/CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
-import { DateFilterDropdown as ir } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as pr } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { TextMultiSelect as fr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as sr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { Filter as dr } from "./components/Filter/Filter.js";
-import { t as gr } from "./ImageUpload-D7HKSXK8.js";
-import { LineChart as cr } from "./components/LineChart/LineChart.js";
-import { t as Dr } from "./Modal-DL4p692X.js";
-import { t as Rr } from "./components-CaEW5ge4.js";
-import { PhoneNumberInput as Vr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
+import { Card as U } from "./components/Card/Card.js";
+import { CopyButton as z } from "./components/CopyButton/CopyButton.js";
+import { DatePicker as Q } from "./components/Datepicker/DatePicker.js";
+import { Radio as X } from "./components/Radio/Radio.js";
+import { RadioGroup as q } from "./components/RadioGroup/RadioGroup.js";
+import { TimePicker as K } from "./components/TimePicker/TimePicker.js";
+import { DateRangePicker as Z } from "./components/DateRangePicker/DateRangePicker.js";
+import { Divider as rr } from "./components/Divider/Divider.js";
+import { Drawer as tr } from "./components/Drawer/Drawer.js";
+import { BadgeMultiSelect as ir } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { CustomDateRangeFilterDropdown as pr } from "./components/Filter/components/CustomDateRangeFilterDropdown/CustomDateRangeFilterDropdown.js";
+import { DateFilterDropdown as fr } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as nr } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TextMultiSelect as dr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as ur } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { Filter as cr } from "./components/Filter/Filter.js";
+import { t as Sr } from "./ImageUpload-BNZjCUTX.js";
+import { LineChart as vr } from "./components/LineChart/LineChart.js";
+import { t as Ar } from "./Modal-B6lSyPYQ.js";
+import { t as wr } from "./components-z-LYRWfq.js";
+import { PhoneNumberInput as Lr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as hr } from "./components/PieChart/PieChart.js";
-import { ProgressBar as Br } from "./components/ProgressBar/ProgressBar.js";
-import { RadioCard as Er } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as Lr } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { Range as Ir } from "./components/Range/Range.js";
+import { ProgressBar as Fr } from "./components/ProgressBar/ProgressBar.js";
+import { RadioCard as Pr } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as Mr } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { Range as _r } from "./components/Range/Range.js";
 import { Select as kr } from "./components/Select/Select.js";
-import { CollapseTrigger as yr } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
-import { Footer as Gr } from "./components/Sidebar/components/Footer/Footer.js";
-import { Label as Or } from "./components/Sidebar/components/Label/Label.js";
-import { Logo as Ur } from "./components/Sidebar/components/Logo/Logo.js";
-import { NavigationGroup as jr } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as Hr } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Kr } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Navigation as Yr } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { Sidebar as _r } from "./components/Sidebar/Sidebar.js";
-import { Slider as ro } from "./components/Slider/Slider.js";
-import { t as to } from "./Spinner-BJE79VTl.js";
-import { horizontalConnectorWrapperVariants as io, stepConnectorVariants as eo, stepContentVariants as po, stepDescriptionVariants as ao, stepIndicatorVariants as fo, stepItemVariants as no, stepLabelVariants as so, stepListVariants as lo, stepVariants as uo, stepperVariants as go } from "./components/Stepper/Stepper.variants.js";
-import { Stepper as co } from "./components/Stepper/Stepper.js";
-import { t as Do } from "./Switch-C7286Bcu.js";
-import { Table as Ro } from "./components/Table/Table.js";
-import { Content as Vo } from "./components/Tabs/components/Content.js";
+import { CollapseTrigger as Ur } from "./components/Sidebar/components/CollapseTrigger/CollapseTrigger.js";
+import { Footer as zr } from "./components/Sidebar/components/Footer/Footer.js";
+import { Label as Qr } from "./components/Sidebar/components/Label/Label.js";
+import { Logo as Xr } from "./components/Sidebar/components/Logo/Logo.js";
+import { NavigationGroup as qr } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Kr } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Zr } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Navigation as ro } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { Sidebar as to } from "./components/Sidebar/Sidebar.js";
+import { Slider as io } from "./components/Slider/Slider.js";
+import { t as po } from "./Spinner-smR3esbL.js";
+import { horizontalConnectorWrapperVariants as fo, stepConnectorVariants as so, stepContentVariants as no, stepDescriptionVariants as lo, stepIndicatorVariants as To, stepItemVariants as uo, stepLabelVariants as go, stepListVariants as co, stepVariants as Do, stepperVariants as So } from "./components/Stepper/Stepper.variants.js";
+import { Stepper as vo } from "./components/Stepper/Stepper.js";
+import { t as Ao } from "./Switch-CPE8v6Zh.js";
+import { Table as wo } from "./components/Table/Table.js";
+import { Content as Lo } from "./components/Tabs/components/Content.js";
 import { List as ho } from "./components/Tabs/components/List.js";
-import { Trigger as Bo } from "./components/Tabs/components/Trigger.js";
-import { Tabs as Eo } from "./components/Tabs/Tabs.js";
-import { Tag as Lo } from "./components/Tag/Tag.js";
-import { TagSelect as Io } from "./components/TagSelect/TagSelect.js";
+import { Trigger as Fo } from "./components/Tabs/components/Trigger.js";
+import { Tabs as Po } from "./components/Tabs/Tabs.js";
+import { Tag as Mo } from "./components/Tag/Tag.js";
+import { TagSelect as _o } from "./components/TagSelect/TagSelect.js";
 import { TextArea as ko } from "./components/TextArea/TextArea.js";
-import { t as yo } from "./Toast-jSx3Lao8.js";
-import { Tooltip as Go } from "./components/Tooltip/Tooltip.js";
-import { t as Oo } from "./events.types-BG1Uh8i6.js";
-import { sendResetFiltersEvent as Uo } from "./components/VirtualizedTable/events/filters/filters.js";
-import { sendRefreshEvent as jo } from "./components/VirtualizedTable/events/refresh/refresh.js";
-import { sendCollapseRowEvent as Ho, sendExpandRowEvent as Jo, sendToggleRowEvent as Ko } from "./components/VirtualizedTable/events/row/row.js";
-import { TruncateText as Yo } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
-import { VirtualizedTable as _o } from "./components/VirtualizedTable/VirtualizedTable.js";
-import { ThemeContext as rt } from "./contexts/theme.context.js";
-import { useTheme as tt } from "./contexts/theme.hook.js";
-import { t as it } from "./theme.provider-CSL1WCYG.js";
+import { DEFAULT_MAX_VISIBLE_TOASTS as Uo, DEFAULT_TOAST_DURATION as Go, DEFAULT_TOAST_LIMIT as zo } from "./components/Toast/constants/index.js";
+import { createToastStore as Qo } from "./components/Toast/store/create-toast-store.js";
+import { useToastStore as Xo, useToastStoreApi as jo } from "./components/Toast/hooks/useToastStore/useToastStore.js";
+import { useToast as Jo } from "./components/Toast/hooks/useToast/useToast.js";
+import { ToastProvider as Yo } from "./components/Toast/ToastProvider.js";
+import { Tooltip as $o } from "./components/Tooltip/Tooltip.js";
+import { t as ot } from "./events.types-BG1Uh8i6.js";
+import { sendResetFiltersEvent as mt } from "./components/VirtualizedTable/events/filters/filters.js";
+import { sendRefreshEvent as et } from "./components/VirtualizedTable/events/refresh/refresh.js";
+import { sendCollapseRowEvent as at, sendExpandRowEvent as ft, sendToggleRowEvent as st } from "./components/VirtualizedTable/events/row/row.js";
+import { TruncateText as lt } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { VirtualizedTable as Tt } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { ThemeContext as gt } from "./contexts/theme.context.js";
+import { useTheme as Dt } from "./contexts/theme.hook.js";
+import { t as Ct } from "./theme.provider-CvL6sqHq.js";
 import "./contexts/index.js";
 export {
-  g as Alert,
-  D as AlertDialog,
-  B as Autocomplete,
-  L as Badge,
-  rr as BadgeMultiSelect,
+  u as Alert,
+  S as AlertDialog,
+  h as Autocomplete,
+  P as Badge,
+  ir as BadgeMultiSelect,
   e as Breadcrumb,
   c as Button,
   k as ButtonGroup,
-  y as Card,
+  U as Card,
   o as Checkbox,
-  yr as CollapseTrigger,
-  Vo as Content,
-  G as CopyButton,
-  n as Counter,
-  tr as CustomDateRangeFilterDropdown,
-  ir as DateFilterDropdown,
-  O as DatePicker,
-  pr as DateRangeFilterDropdown,
-  K as DateRangePicker,
-  Y as Divider,
-  _ as Drawer,
+  Ur as CollapseTrigger,
+  Lo as Content,
+  z as CopyButton,
+  s as Counter,
+  pr as CustomDateRangeFilterDropdown,
+  Uo as DEFAULT_MAX_VISIBLE_TOASTS,
+  Go as DEFAULT_TOAST_DURATION,
+  zo as DEFAULT_TOAST_LIMIT,
+  fr as DateFilterDropdown,
+  Q as DatePicker,
+  nr as DateRangeFilterDropdown,
+  Z as DateRangePicker,
+  rr as Divider,
+  tr as Drawer,
   kr as Dropdown,
   m as DropdownButton,
-  dr as Filter,
-  Gr as Footer,
-  gr as ImageUpload,
+  cr as Filter,
+  zr as Footer,
+  Sr as ImageUpload,
   a as Input,
-  Or as Label,
-  cr as LineChart,
+  Qr as Label,
+  vr as LineChart,
   ho as List,
-  E as Loading,
-  Ur as Logo,
-  Dr as Modal,
-  Rr as MultiSelectDropdown,
-  Yr as Navigation,
-  jr as NavigationGroup,
-  Hr as NavigationOption,
-  Kr as NavigationSeparator,
-  n as NumberInput,
-  Vr as PhoneNumberInput,
+  F as Loading,
+  Xr as Logo,
+  Ar as Modal,
+  wr as MultiSelectDropdown,
+  ro as Navigation,
+  qr as NavigationGroup,
+  Kr as NavigationOption,
+  Zr as NavigationSeparator,
+  s as NumberInput,
+  Lr as PhoneNumberInput,
   hr as PieChart,
-  Br as ProgressBar,
-  U as Radio,
-  Er as RadioCard,
-  Lr as RadioCardGroup,
-  j as RadioGroup,
-  Ir as Range,
+  Fr as ProgressBar,
+  X as Radio,
+  Pr as RadioCard,
+  Mr as RadioCardGroup,
+  q as RadioGroup,
+  _r as Range,
   kr as Select,
-  _r as Sidebar,
-  ro as Slider,
-  to as Spinner,
-  co as Stepper,
-  Do as Switch,
-  Ro as Table,
-  Eo as Tabs,
-  Lo as Tag,
-  Io as TagSelect,
+  to as Sidebar,
+  io as Slider,
+  po as Spinner,
+  vo as Stepper,
+  Ao as Switch,
+  wo as Table,
+  Po as Tabs,
+  Mo as Tag,
+  _o as TagSelect,
   ko as TextArea,
-  fr as TextMultiSelect,
-  rt as ThemeContext,
-  it as ThemeProvider,
-  sr as TimeFilterDropdown,
-  H as TimePicker,
-  yo as Toast,
-  Go as Tooltip,
-  Bo as Trigger,
-  Yo as TruncateText,
-  I as Typography,
-  _o as VirtualizedTable,
-  Oo as VirtualizedTableEvent,
+  dr as TextMultiSelect,
+  gt as ThemeContext,
+  Ct as ThemeProvider,
+  ur as TimeFilterDropdown,
+  K as TimePicker,
+  M as Toast,
+  Yo as ToastProvider,
+  $o as Tooltip,
+  Fo as Trigger,
+  lt as TruncateText,
+  _ as Typography,
+  Tt as VirtualizedTable,
+  ot as VirtualizedTableEvent,
   d as cn,
-  io as horizontalConnectorWrapperVariants,
+  Qo as createToastStore,
+  fo as horizontalConnectorWrapperVariants,
   l as resolveColor,
-  Ho as sendCollapseRowEvent,
-  Jo as sendExpandRowEvent,
-  jo as sendRefreshEvent,
-  Uo as sendResetFiltersEvent,
-  Ko as sendToggleRowEvent,
-  eo as stepConnectorVariants,
-  po as stepContentVariants,
-  ao as stepDescriptionVariants,
-  fo as stepIndicatorVariants,
-  no as stepItemVariants,
-  so as stepLabelVariants,
-  lo as stepListVariants,
-  uo as stepVariants,
-  go as stepperVariants,
-  R as useClickOutside,
-  V as useMediaQuery,
-  tt as useTheme,
-  h as useToggle
+  at as sendCollapseRowEvent,
+  ft as sendExpandRowEvent,
+  et as sendRefreshEvent,
+  mt as sendResetFiltersEvent,
+  st as sendToggleRowEvent,
+  so as stepConnectorVariants,
+  no as stepContentVariants,
+  lo as stepDescriptionVariants,
+  To as stepIndicatorVariants,
+  uo as stepItemVariants,
+  go as stepLabelVariants,
+  co as stepListVariants,
+  Do as stepVariants,
+  So as stepperVariants,
+  v as useClickOutside,
+  A as useIsHydrated,
+  w as useMediaQuery,
+  Dt as useTheme,
+  Jo as useToast,
+  Xo as useToastStore,
+  jo as useToastStoreApi,
+  L as useToggle
 };

package/dist/lib/components/Command/components/CommandShortcut.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 declare const CommandShortcut: {
-    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import('react').JSX.Element;
     displayName: string;
 };
 export { CommandShortcut };

package/dist/lib/components/Command/contexts/Command.provider.d.ts

@@ -1,2 +1,2 @@
 import { PropsWithChildren } from 'react';
-export declare const CommandProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export declare const CommandProvider: ({ children }: PropsWithChildren) => import('react').JSX.Element;

package/dist/lib/components/ImageUpload/ImageUpload.d.ts

@@ -19,7 +19,7 @@ import { Props } from './ImageUpload.types';
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
  */
 declare const ImageUpload: {
-    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: Props): import("react").JSX.Element;
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: Props): import('react').JSX.Element;
     displayName: string;
 };
 export { ImageUpload };

package/dist/lib/components/Modal/contexts/Modal.provider.d.ts

@@ -1,4 +1,4 @@
 import { ReactNode } from 'react';
 export declare const ModalProvider: ({ children }: {
     children: ReactNode;
-}) => import("react").JSX.Element;
+}) => import('react').JSX.Element;

package/dist/lib/components/Toast/Toast.d.ts

@@ -1,25 +1,30 @@
 import { FC } from 'react';
 import { Props } from './Toast.types';
 /**
- * A toast notification component built on Radix UI primitives.
- * Wraps a trigger element and shows a toast when clicked.
+ * A stack of toast notifications anchored to the bottom-right corner.
+ *
+ * The newest toast sits in front; older ones peek out behind it and the whole
+ * stack expands on hover or focus, holding every auto-dismiss countdown until
+ * the pointer leaves, focus moves out or the window loses focus. By default
+ * each toast then resumes with the time it had left; `hoverBehavior="restart"`
+ * gives them their full duration again and dismisses them one by one.
+ * Rendered through a portal on `document.body` so no ancestor can clip or
+ * cover it, and themed through the `data-theme` it lands under.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = useState(false);
+ * <App />
+ * <Toast limit={5} duration={3000} />
  *
- * <Toast
- *   open={open}
- *   setOpen={setOpen}
- *   title="Saved"
- *   description="Your changes have been saved successfully"
- *   variant="success"
- *   duration={3000}
- * >
- *   <Button>Save Changes</Button>
- * </Toast>
+ * const { addToast } = useToast();
+ * addToast({ title: 'Saved', type: 'success' });
  * ```
  *
- * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-toast--docs Storybook}
+ * No `ToastProvider` is needed: the stack and `useToast()` share a built-in
+ * store that `duration` and `limit` configure (`limit={1}` shows one toast at
+ * a time). Wrap a subtree in `ToastProvider` to scope or inject a store, or
+ * pass `toasts` and `onDismiss` to drive the stack from your own state.
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/in-review-toast-light--docs Storybook}
  */
 export declare const Toast: FC<Props>;

package/dist/lib/components/Toast/Toast.types.d.ts

@@ -1,48 +1,75 @@
-import { VariantProps } from 'class-variance-authority';
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
-import { toastVariants } from './Toast.variants';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export type ToastItem = {
+    /** Description text or element */
+    description?: ReactNode;
+    /** Auto-dismiss duration in ms; 0 keeps the toast until dismissed (default: 3000) */
+    duration?: number;
+    /** Stable identifier, also passed to `onDismiss` */
+    id: string;
+    /** Show close button (default: true) */
+    showCloseButton?: boolean;
+    /** Title text or element */
+    title: ReactNode;
+    /** Visual type (default: 'info') */
+    type?: ToastType;
+};
+export type ToastInput = Omit<ToastItem, 'id'>;
+export type ToastHoverBehavior = 'resume' | 'restart';
+export type ToastHeights = Record<string, number>;
 /**
- * Props for the Toast component.
+ * Props for the Toast stack.
  *
  * @example
  * ```tsx
- * const [open, setOpen] = useState(false);
- *
- * <Toast
- *   open={open}
- *   setOpen={setOpen}
- *   title="Success"
- *   description="Your changes have been saved"
- *   variant="success"
- * >
- *   <Button onClick={() => setOpen(true)}>Show Toast</Button>
- * </Toast>
+ * <ToastProvider>
+ *   <App />
+ *   <Toast />
+ * </ToastProvider>
  * ```
  */
-export interface Props extends PropsWithChildren, VariantProps<typeof toastVariants> {
-    /** Additional CSS classes for the toast */
+export type Props = {
+    /** Additional CSS classes for the fixed region */
     className?: string;
-    /** CSS classes for the close button */
-    closeButtonClassName?: string;
-    /** Description text or element */
-    description: string | ReactNode;
-    /** CSS classes for the description */
-    descriptionClassName?: string;
-    /** Auto-dismiss duration in ms (default: 5000) */
+    /** Accessible name of every close button (default: 'Close toast') */
+    closeLabel?: string;
+    /** Portal target (default: document.body) */
+    container?: Element | null;
+    /**
+     * Auto-dismiss duration applied to toasts published without one, set on
+     * the store this stack draws from (default: 3000)
+     */
     duration?: number;
-    /** Controlled open state */
-    open: boolean;
-    /** Show close button (default: true) */
-    showCloseButton?: boolean;
+    /** Render through a portal instead of in place (default: true) */
+    isPortal?: boolean;
+    /**
+     * What happens to the auto-dismiss countdowns after the stack is hovered or
+     * focused: `resume` continues each toast with the time it had left,
+     * `restart` gives every toast its full duration again and dismisses them
+     * one by one, oldest first (default: 'resume')
+     */
+    hoverBehavior?: ToastHoverBehavior;
+    /** Accessible name of the notifications region (default: 'Notifications') */
+    label?: string;
+    /**
+     * Toasts kept in the queue, dropping the oldest past it, set on the store
+     * this stack draws from (default: 5)
+     */
+    limit?: number;
+    /** Toasts kept visible while collapsed; the rest stay hidden behind (default: 3) */
+    maxVisible?: number;
     /** Theme override for this component */
     theme?: Theme;
-    /** Title text or element */
-    title: string | ReactNode;
-    /** CSS classes for the title */
-    titleClassName?: string;
-    /** Callback to update open state */
-    setOpen: (open: boolean) => void;
-}
+    /**
+     * Toasts in publish order, oldest first; the newest one is shown in front.
+     * Leave out `toasts` and `onDismiss` to read them from the nearest
+     * `ToastProvider`, or from the built-in store `useToast()` publishes to
+     * when there is none
+     */
+    toasts?: ToastItem[];
+    /** Called when a toast expires or its close button is pressed */
+    onDismiss?: (id: string) => void;
+};
 /** @deprecated Use Props instead */
 export type ToastProps = Props;

package/dist/lib/components/Toast/Toast.variants.d.ts

@@ -1,5 +1,18 @@
+export declare const toastFrameVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const toastVariants: (props?: ({
-    variant?: "success" | "info" | "warning" | "error" | null | undefined;
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastTitleVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastDescriptionVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastIconVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const toastCloseButtonVariants: (props?: ({
+    type?: "success" | "info" | "warning" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const viewportToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export declare const closeToastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Props } from './ToastProvider.types';
+/**
+ * Optional scope for the toast queue: everything below it publishes with
+ * `useToast()` into this store and a `<Toast />` inside draws it. Use it to
+ * inject a store shared with other code (`store`) or to isolate a subtree;
+ * without it, `<Toast />` and `useToast()` share one built-in store.
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/in-review-toast-light--docs Storybook}
+ */
+export declare const ToastProvider: FC<Props>;

package/dist/lib/components/Toast/ToastProvider.types.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { ToastStore, ToastStoreOptions } from './store/create-toast-store.types';
+/**
+ * Props for the ToastProvider.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider duration={3000} limit={5}>
+ *   <App />
+ *   <Toast />
+ * </ToastProvider>
+ * ```
+ */
+export type Props = PropsWithChildren<ToastStoreOptions & {
+    /** An existing store to share, e.g. one also exposed to other apps */
+    store?: ToastStore;
+}>;

package/dist/lib/components/Toast/components/ToastCard/ToastCard.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ToastCard.types';
+export declare const ToastCard: FC<Props>;

package/dist/lib/components/Toast/components/ToastCard/ToastCard.types.d.ts

@@ -0,0 +1,17 @@
+import { ToastItem } from '../../Toast.types';
+export type Props = {
+    closeLabel: string;
+    expanded: boolean;
+    frontHeight: number;
+    index: number;
+    offset: number;
+    reducedMotion: boolean;
+    restartOnLeave: boolean;
+    resumeDelay: number;
+    toast: ToastItem;
+    total: number;
+    visible: boolean;
+    onDismiss: () => void;
+    onExited: (id: string) => void;
+    onHeightChange: (id: string, height: number) => void;
+};

package/dist/lib/components/Toast/components/index.d.ts

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