@winkintel/bootstrap-svelte 0.0.1

package/dist/Table/table.svelte.d.ts

@@ -0,0 +1,98 @@
+import type { Table } from './index.js';
+/**
+ * ## Table
+ * A component to render a Bootstrap table.
+ *
+ * @example
+ * ```svelte
+ * <Table.Root isBordered isStriped isHoverable>
+ *   <Table.Head>
+ *       <Table.Row>
+ *           <Table.Header>#</Table.Header>
+ *           <Table.Header>First Name</Table.Header>
+ *           <Table.Header>Last Name</Table.Header>
+ *           <Table.Header>Username</Table.Header>
+ *       </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *       <Table.Row>
+ *           <Table.Header>1</Table.Header>
+ *           <Table.Cell>Mark</Table.Cell>
+ *           <Table.Cell>Otto</Table.Cell>
+ *           <Table.Cell>@mdo</Table.Cell>
+ *       </Table.Row>
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ * #### Responsive Table
+ * ```svelte
+ * <Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'md' }}>
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Caption Example
+ * ```svelte
+ * <Table.Root isBordered isCaptionTop>
+ *   <Table.Caption>List of users</Table.Caption>
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Striped Columns Example
+ * ```svelte
+ * <Table.Root isBordered isStripedColumns>
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Vertical Alignment Example
+ * ```svelte
+ * <Table.Root isBordered verticalAlign="middle">
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Color Variants
+ * ```svelte
+ * <Table.Root isBordered colorVariant="dark">
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Border Color Variants
+ * ```svelte
+ * <Table.Root isBordered borderColorVariant="border-primary">
+ *   ...
+ * </Table.Root>
+ * ```
+ * #### Size Variants
+ * ```svelte
+ * <Table.Root isBordered size="sm">
+ *   ...
+ * </Table.Root>
+ * ```
+ * ### Sub-components
+ * - `Table.Caption`: Component to render a table caption.
+ * - `Table.Head`: Component to render the table head section.
+ * - `Table.Body`: Component to render the table body section.
+ * - `Table.Row`: Component to render a table row.
+ * - `Table.Header`: Component to render a table header cell.
+ * - `Table.Data`: Component to render a table data cell.
+ *
+ * ### Props
+ * - `borderColorVariant` (string): Optional. Border color variant class (e.g., 'border-primary').
+ * - `colorVariant` (string): Optional. Color variant for the table (e.g., 'dark', 'light').
+ * - `containerProps` (object): Optional. Props for the container div when `isContained` is true.
+ * - `elementRef` (HTMLTableElement): Optional. Reference to the table element.
+ * - `isBordered` (boolean): Optional. If true, adds borders to all table cells. Default is false.
+ * - `isBorderless` (boolean): Optional. If true, removes borders from the table. Default is false.
+ * - `isCaptionTop` (boolean): Optional. If true, places the caption at the top of the table. Default is false.
+ * - `isContained` (boolean): Optional. If true, wraps the table in a container div. Default is false.
+ * - `isHoverable` (boolean): Optional. If true, enables hover state on table rows. Default is false.
+ * - `isResponsive` (boolean): Optional. If true, makes the table responsive. Default is false.
+ * - `isStriped` (boolean): Optional. If true, adds zebra-striping to the table rows. Default is false.
+ * - `isStripedColumns` (boolean): Optional. If true, adds zebra-striping to the table columns. Default is false.
+ * - `responsiveProps` (object): Optional. Props for responsive behavior, including:
+ * - `breakpoint` (string): Breakpoint for responsive table. Options: 'sm', 'md', 'lg', 'xl', 'xxl'. Default is 'md'.
+ * - `size` (string): Optional. Size variant for the table. Options: 'sm'. Default is undefined.
+ * - `verticalAlign` (string): Optional. Vertical alignment for table cells. Options: 'top', 'middle', 'bottom'. Default is undefined.
+ */
+declare const Table: import("svelte").Component<Table.RootProps, {}, "elementRef">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/Table/table.svelte.js

@@ -0,0 +1,92 @@
+import { Context } from '../common/index.js';
+export class TableBodyState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableDataState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableFootState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableHeadState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableHeaderState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableRootState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+export class TableRowState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+const TableBodyContext = new Context('table-body');
+const TableDataContext = new Context('table-data');
+const TableFootContext = new Context('table-foot');
+const TableHeadContext = new Context('table-head');
+const TableHeaderContext = new Context('table-header');
+const TableRootContext = new Context('table-root');
+const TableRowContext = new Context('table-row');
+export const doesTableBodyContextExists = () => TableBodyContext.exists();
+export const doesTableDataContextExists = () => TableDataContext.exists();
+export const doesTableFootContextExists = () => TableFootContext.exists();
+export const doesTableHeadContextExists = () => TableHeadContext.exists();
+export const doesTableHeaderContextExists = () => TableHeaderContext.exists();
+export const doesTableRootContextExists = () => TableRootContext.exists();
+export const doesTableRowContextExists = () => TableRowContext.exists();
+export function initTableBodyState(props) {
+    const state = new TableBodyState(props);
+    TableBodyContext.set(state);
+    return state;
+}
+export function initTableDataState(props) {
+    const state = new TableDataState(props);
+    TableDataContext.set(state);
+    return state;
+}
+export function initTableFootState(props) {
+    const state = new TableFootState(props);
+    TableFootContext.set(state);
+    return state;
+}
+export function initTableHeadState(props) {
+    const state = new TableHeadState(props);
+    TableHeadContext.set(state);
+    return state;
+}
+export function initTableHeaderState(props) {
+    const state = new TableHeaderState(props);
+    TableHeaderContext.set(state);
+    return state;
+}
+export function initTableRootState(props) {
+    const state = new TableRootState(props);
+    TableRootContext.set(state);
+    return state;
+}
+export function initTableRowState(props) {
+    const state = new TableRowState(props);
+    TableRowContext.set(state);
+    return state;
+}

package/dist/Table/types.d.ts

@@ -0,0 +1,43 @@
+import type { BaseBreakpoint, BaseColorVariant, BorderColorVariant, CaptionElement, DivElement, TableBodyElement, TableDataElement, TableElement, TableFootElement, TableHeadElement, TableHeaderElement, TableRowElement, VerticalAlign } from '../common/index.js';
+import type { Snippet } from 'svelte';
+export type TableBodyProps = TableBodyElement & {
+    hasGroupDivider?: boolean;
+};
+export type TableCaptionProps = CaptionElement;
+export type TableContainerProps = DivElement;
+export type TableDataProps = TableDataElement & {
+    colorVariant?: BaseColorVariant;
+    isActive?: boolean;
+    verticalAlign?: VerticalAlign;
+};
+export type TableFootProps = TableFootElement & {
+    hasGroupDivider?: boolean;
+};
+export type TableHeadProps = TableHeadElement & {
+    colorScheme?: 'dark' | 'light';
+};
+export type TableHeaderProps = TableHeaderElement & {};
+export type TableResponsiveProps = DivElement & {
+    breakpoint?: BaseBreakpoint;
+};
+export type TableRootProps = TableElement & {
+    borderColorVariant?: BorderColorVariant;
+    colorVariant?: BaseColorVariant;
+    containerProps?: TableContainerProps;
+    isBordered?: boolean;
+    isBorderless?: boolean;
+    isCaptionTop?: boolean;
+    isHoverable?: boolean;
+    isResponsive?: boolean;
+    isStriped?: boolean;
+    isStripedColumns?: boolean;
+    responsiveProps?: TableResponsiveProps;
+    size?: 'sm';
+    tableContainerFooter?: Snippet;
+    verticalAlign?: VerticalAlign;
+};
+export type TableRowProps = TableRowElement & {
+    colorVariant?: BaseColorVariant;
+    isActive?: boolean;
+    verticalAlign?: VerticalAlign;
+};

package/dist/Table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Toast/composition.d.ts

@@ -0,0 +1,5 @@
+export { default as Body } from './toast-body.svelte';
+export { default as Container } from './toast-container.svelte';
+export { default as Header } from './toast-header.svelte';
+export { default as Root } from './toast.svelte';
+export type { ToastBodyProps as BodyProps, ToastContainerProps as ContainerProps, ToastHeaderProps as HeaderProps, ToastRootProps as RootProps } from './types.js';

package/dist/Toast/composition.js

@@ -0,0 +1,4 @@
+export { default as Body } from './toast-body.svelte';
+export { default as Container } from './toast-container.svelte';
+export { default as Header } from './toast-header.svelte';
+export { default as Root } from './toast.svelte';

package/dist/Toast/index.d.ts

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

package/dist/Toast/index.js

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

package/dist/Toast/toast-body.svelte

@@ -0,0 +1,26 @@
+<!--
+@component
+## Toast.Body
+Body component for the Toast. Contains the main content/message of the toast notification.
+
+@example
+```svelte
+<Toast.Body>This is a toast message.</Toast.Body>
+```
+
+### Props
+- `children` (slot): Content to display inside the body
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the body DOM element
+- `id` (string): Optional. ID for the body element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `toast-body-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('toast-body', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Toast/toast-body.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ## Toast.Body
+ * Body component for the Toast. Contains the main content/message of the toast notification.
+ *
+ * @example
+ * ```svelte
+ * <Toast.Body>This is a toast message.</Toast.Body>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the body
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the body DOM element
+ * - `id` (string): Optional. ID for the body element
+ */
+declare const ToastBody: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type ToastBody = ReturnType<typeof ToastBody>;
+export default ToastBody;

package/dist/Toast/toast-container.svelte

@@ -0,0 +1,44 @@
+<!--
+@component
+## Toast.Container
+Container component for multiple toasts. Properly placements toasts within the viewport.
+
+@example
+```svelte
+<Toast.Container placement="bottom-end">
+    <Toast.Root>...</Toast.Root>
+    <Toast.Root>...</Toast.Root>
+</Toast.Container>
+```
+
+#### Different placements
+```svelte
+<Toast.Container placement="top-start">...</Toast.Container>
+<Toast.Container placement="top-center">...</Toast.Container>
+<Toast.Container placement="top-end">...</Toast.Container>
+<Toast.Container placement="middle-start">...</Toast.Container>
+<Toast.Container placement="middle-center">...</Toast.Container>
+<Toast.Container placement="middle-end">...</Toast.Container>
+<Toast.Container placement="bottom-start">...</Toast.Container>
+<Toast.Container placement="bottom-center">...</Toast.Container>
+<Toast.Container placement="bottom-end">...</Toast.Container>
+```
+
+### Props
+- `children` (slot): Toast components to display inside the container.
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the container DOM element.
+- `id` (string): Optional. ID for the container element.
+- `placement` (ToastPlacement): Optional. Placement of the container in the viewport. Default is 'bottom-end'.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { transformToastPlacement } from './types.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `toast-container-${uid}`, isFixed = true, placement = 'bottom-end', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('toast-container', { 'position-fixed': isFixed }, 'p-3', transformToastPlacement(placement), classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Toast/toast-container.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Toast } from './index.js';
+/**
+ * ## Toast.Container
+ * Container component for multiple toasts. Properly placements toasts within the viewport.
+ *
+ * @example
+ * ```svelte
+ * <Toast.Container placement="bottom-end">
+ * <Toast.Root>...</Toast.Root>
+ * <Toast.Root>...</Toast.Root>
+ * </Toast.Container>
+ * ```
+ *
+ * #### Different placements
+ * ```svelte
+ * <Toast.Container placement="top-start">...</Toast.Container>
+ * <Toast.Container placement="top-center">...</Toast.Container>
+ * <Toast.Container placement="top-end">...</Toast.Container>
+ * <Toast.Container placement="middle-start">...</Toast.Container>
+ * <Toast.Container placement="middle-center">...</Toast.Container>
+ * <Toast.Container placement="middle-end">...</Toast.Container>
+ * <Toast.Container placement="bottom-start">...</Toast.Container>
+ * <Toast.Container placement="bottom-center">...</Toast.Container>
+ * <Toast.Container placement="bottom-end">...</Toast.Container>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Toast components to display inside the container.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the container DOM element.
+ * - `id` (string): Optional. ID for the container element.
+ * - `placement` (ToastPlacement): Optional. Placement of the container in the viewport. Default is 'bottom-end'.
+ */
+declare const ToastContainer: import("svelte").Component<Toast.ContainerProps, {}, "elementRef">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/Toast/toast-header.svelte

@@ -0,0 +1,56 @@
+<!--
+@component
+## Toast.Header
+Header component for the Toast. Usually contains a title, optional subtext (like a timestamp), and a close button.
+
+@example
+```svelte
+<Toast.Header>This is a toast header text.</Toast.Header>
+```
+
+#### Custom header content
+```svelte
+<Toast.Header>
+    <img src="..." class="rounded me-2" alt="...">
+    <strong class="me-auto">Bootstrap</strong>
+    <small>11 mins ago</small>
+</Toast.Header>
+```
+
+#### Without close button
+```svelte
+<Toast.Header isDismissible={false}>
+    <strong>No close button here</strong>
+</Toast.Header>
+```
+
+### Props
+- `children` (slot): Content to display inside the header.
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the header DOM element.
+- `id` (string): Optional. ID for the header element.
+- `isDismissible` (boolean): Optional. Whether to show a close button. Default is true.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { CloseButton } from '../index.js';
+import { initToastHeaderState, ToastHeaderState } from './toast.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `toast-header-${uid}`, isDismissible = ToastHeaderState.IS_DISMISSIBLE_DEFAULT, ...restOfProps } = $props();
+const headerState = initToastHeaderState({
+    get isDismissible() {
+        return isDismissible;
+    }
+});
+let classes = $derived(uniqueClsx('toast-header', classValues));
+const handleClick = (_event) => {
+    headerState.onclick();
+};
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+    {#if isDismissible}
+        <CloseButton onclick={handleClick}></CloseButton>
+    {/if}
+</div>

package/dist/Toast/toast-header.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Toast } from './index.js';
+/**
+ * ## Toast.Header
+ * Header component for the Toast. Usually contains a title, optional subtext (like a timestamp), and a close button.
+ *
+ * @example
+ * ```svelte
+ * <Toast.Header>This is a toast header text.</Toast.Header>
+ * ```
+ *
+ * #### Custom header content
+ * ```svelte
+ * <Toast.Header>
+ * <img src="..." class="rounded me-2" alt="...">
+ * <strong class="me-auto">Bootstrap</strong>
+ * <small>11 mins ago</small>
+ * </Toast.Header>
+ * ```
+ *
+ * #### Without close button
+ * ```svelte
+ * <Toast.Header isDismissible={false}>
+ * <strong>No close button here</strong>
+ * </Toast.Header>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the header.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the header DOM element.
+ * - `id` (string): Optional. ID for the header element.
+ * - `isDismissible` (boolean): Optional. Whether to show a close button. Default is true.
+ */
+declare const ToastHeader: import("svelte").Component<Toast.HeaderProps, {}, "elementRef">;
+type ToastHeader = ReturnType<typeof ToastHeader>;
+export default ToastHeader;

package/dist/Toast/toast.svelte

@@ -0,0 +1,112 @@
+<!--
+@component
+## Toast
+Lightweight notifications designed to mimic push notifications that modern web and mobile apps use.
+
+@example
+```svelte
+<Toast.Root isShown={true}>
+    <Toast.Header>
+        <span>Toast Title</span>
+    </Toast.Header>
+    <Toast.Body>
+        Toast message goes here.
+    </Toast.Body>
+</Toast.Root>
+```
+
+#### Basic Toast
+```svelte
+<Toast.Root isShown={true}>
+    <Toast.Header titleText="Toast Title" subText="11 mins ago" />
+    <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
+</Toast.Root>
+```
+
+#### Autohide Options
+```svelte
+<Toast.Root doAutohide={false}>...</Toast.Root>
+<Toast.Root doAutohide={8000}>...</Toast.Root>
+```
+
+#### Custom Container
+```svelte
+<div id="toast-container"></div>
+<Toast.Root container="#toast-container">...</Toast.Root>
+```
+
+### Props
+- `children` (slot): Content to display inside the toast.
+- `class` (string): Optional. Additional CSS classes.
+- `delay` (number): Optional. Delay in milliseconds before hiding the toast. Default is 5000.
+- `doAutohide` (boolean): Optional. Automatically hide the toast after the delay. Default is true.
+- `elementRef` (HTMLElement): Optional. Reference to the toast DOM element.
+- `id` (string): Optional. ID for the toast element.
+- `isShown` (boolean): Optional. Controls whether the toast is visible.
+- `onHide` (function): Optional. Callback to invoke when the toast starts hiding.
+- `onHidden` (function): Optional. Callback to invoke when the toast has been hidden.
+- `onShow` (function): Optional. Callback to invoke when the toast starts showing.
+- `onShown` (function): Optional. Callback to invoke when the toast has been shown.
+- `useFade` (boolean): Optional. If true, applies a fade transition to the toast. Default is true.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { fade } from 'svelte/transition';
+import { initToastRootState, ToastRootState } from './toast.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, delay = ToastRootState.DELAY_DEFAULT, doAutohide = ToastRootState.DO_AUTOHIDE_DEFAULT, elementRef = $bindable(null), id = `toast-${uid}`, isShown = ToastRootState.IS_SHOWN_DEFAULT, onHide = noop, onHidden = noop, onShow = noop, onShown = noop, useFade = ToastRootState.USE_FADE_DEFAULT, ...restOfProps } = $props();
+const rootState = initToastRootState({
+    get isShown() {
+        return isShown;
+    }
+});
+// Track the previously synchronized isShown value so we only react to
+// genuine prop transitions (not to reads of the live rootState.props.isShown).
+let previousIsShown;
+// Listen changes to the isShown prop and update the root state accordingly...
+$effect(() => {
+    if (previousIsShown !== undefined && previousIsShown !== isShown) {
+        if (isShown && !rootState.isShown) {
+            rootState.toggleIsShown();
+        }
+        else if (!isShown && rootState.isShown) {
+            rootState.toggleIsShown();
+        }
+    }
+    previousIsShown = isShown;
+});
+// Listen changes to the doAutohide and delay prop and update the root state accordingly...
+$effect(() => {
+    if (rootState.isShown && doAutohide && delay > 0) {
+        const timer = setTimeout(() => {
+            rootState.toggleIsShown();
+        }, delay);
+        return () => {
+            clearTimeout(timer);
+        };
+    }
+});
+let classes = $derived(uniqueClsx('toast', {
+    fade: useFade,
+    show: rootState.isShown
+}, classValues));
+</script>
+
+{#if rootState.isShown}
+    <div
+        aria-atomic="true"
+        aria-live="assertive"
+        bind:this={elementRef}
+        class={classes}
+        role="alert"
+        {id}
+        onintrostart={onShow}
+        onintroend={onShown}
+        onoutrostart={onHide}
+        onoutroend={onHidden}
+        transition:fade={{ duration: useFade ? 150 : 0 }}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/dist/Toast/toast.svelte.d.ts

@@ -0,0 +1,54 @@
+import type { Toast } from './index.js';
+/**
+ * ## Toast
+ * Lightweight notifications designed to mimic push notifications that modern web and mobile apps use.
+ *
+ * @example
+ * ```svelte
+ * <Toast.Root isShown={true}>
+ * <Toast.Header>
+ *     <span>Toast Title</span>
+ * </Toast.Header>
+ * <Toast.Body>
+ *     Toast message goes here.
+ * </Toast.Body>
+ * </Toast.Root>
+ * ```
+ *
+ * #### Basic Toast
+ * ```svelte
+ * <Toast.Root isShown={true}>
+ * <Toast.Header titleText="Toast Title" subText="11 mins ago" />
+ * <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
+ * </Toast.Root>
+ * ```
+ *
+ * #### Autohide Options
+ * ```svelte
+ * <Toast.Root doAutohide={false}>...</Toast.Root>
+ * <Toast.Root doAutohide={8000}>...</Toast.Root>
+ * ```
+ *
+ * #### Custom Container
+ * ```svelte
+ * <div id="toast-container"></div>
+ * <Toast.Root container="#toast-container">...</Toast.Root>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the toast.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `delay` (number): Optional. Delay in milliseconds before hiding the toast. Default is 5000.
+ * - `doAutohide` (boolean): Optional. Automatically hide the toast after the delay. Default is true.
+ * - `elementRef` (HTMLElement): Optional. Reference to the toast DOM element.
+ * - `id` (string): Optional. ID for the toast element.
+ * - `isShown` (boolean): Optional. Controls whether the toast is visible.
+ * - `onHide` (function): Optional. Callback to invoke when the toast starts hiding.
+ * - `onHidden` (function): Optional. Callback to invoke when the toast has been hidden.
+ * - `onShow` (function): Optional. Callback to invoke when the toast starts showing.
+ * - `onShown` (function): Optional. Callback to invoke when the toast has been shown.
+ * - `useFade` (boolean): Optional. If true, applies a fade transition to the toast. Default is true.
+ */
+declare const Toast: import("svelte").Component<Toast.RootProps, {}, "elementRef">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;