@colletdev/react 0.1.3

package/dist/generated/table.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Table = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onSortRef = useRef(props.onSort);
+    onSortRef.current = props.onSort;
+    const onSelectRef = useRef(props.onSelect);
+    onSelectRef.current = props.onSelect;
+    const onExpandRef = useRef(props.onExpand);
+    onExpandRef.current = props.onExpand;
+    const onPageRef = useRef(props.onPage);
+    onPageRef.current = props.onPage;
+    const onKeydownRef = useRef(props.onKeydown);
+    onKeydownRef.current = props.onKeydown;
+    const onKeyupRef = useRef(props.onKeyup);
+    onKeyupRef.current = props.onKeyup;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onSortRef.current?.(e);
+        el.addEventListener('cx-sort', handler);
+        return () => el.removeEventListener('cx-sort', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onSelectRef.current?.(e);
+        el.addEventListener('cx-select', handler);
+        return () => el.removeEventListener('cx-select', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onExpandRef.current?.(e);
+        el.addEventListener('cx-expand', handler);
+        return () => el.removeEventListener('cx-expand', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onPageRef.current?.(e);
+        el.addEventListener('cx-page', handler);
+        return () => el.removeEventListener('cx-page', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeydownRef.current?.(e);
+        el.addEventListener('cx-keydown', handler);
+        return () => el.removeEventListener('cx-keydown', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeyupRef.current?.(e);
+        el.addEventListener('cx-keyup', handler);
+        return () => el.removeEventListener('cx-keyup', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.loading != null) {
+            el.setAttribute('loading', String(props.loading));
+        }
+        else {
+            el.removeAttribute('loading');
+        }
+    }, [props.loading]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.columns != null) {
+            el.setAttribute('columns', typeof props.columns === 'object' ? JSON.stringify(props.columns) : String(props.columns));
+        }
+        else {
+            el.removeAttribute('columns');
+        }
+    }, [props.columns]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.rows != null) {
+            el.setAttribute('rows', typeof props.rows === 'object' ? JSON.stringify(props.rows) : String(props.rows));
+        }
+        else {
+            el.removeAttribute('rows');
+        }
+    }, [props.rows]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.selected != null) {
+            el.setAttribute('selected', typeof props.selected === 'object' ? JSON.stringify(props.selected) : String(props.selected));
+        }
+        else {
+            el.removeAttribute('selected');
+        }
+    }, [props.selected]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.sorts != null) {
+            el.setAttribute('sorts', typeof props.sorts === 'object' ? JSON.stringify(props.sorts) : String(props.sorts));
+        }
+        else {
+            el.removeAttribute('sorts');
+        }
+    }, [props.sorts]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.pagination != null) {
+            el.setAttribute('pagination', typeof props.pagination === 'object' ? JSON.stringify(props.pagination) : String(props.pagination));
+        }
+        else {
+            el.removeAttribute('pagination');
+        }
+    }, [props.pagination]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.footer != null) {
+            el.setAttribute('footer', typeof props.footer === 'object' ? JSON.stringify(props.footer) : String(props.footer));
+        }
+        else {
+            el.removeAttribute('footer');
+        }
+    }, [props.footer]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.emptyState != null) {
+            el.setAttribute('empty-state', typeof props.emptyState === 'object' ? JSON.stringify(props.emptyState) : String(props.emptyState));
+        }
+        else {
+            el.removeAttribute('empty-state');
+        }
+    }, [props.emptyState]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.columnOrder != null) {
+            el.setAttribute('column-order', typeof props.columnOrder === 'object' ? JSON.stringify(props.columnOrder) : String(props.columnOrder));
+        }
+        else {
+            el.removeAttribute('column-order');
+        }
+    }, [props.columnOrder]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.caption != null)
+        attrs['caption'] = typeof props.caption === 'object' ? JSON.stringify(props.caption) : String(props.caption);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.selectable != null)
+        attrs['selectable'] = typeof props.selectable === 'object' ? JSON.stringify(props.selectable) : String(props.selectable);
+    if (props.hoverable)
+        attrs['hoverable'] = '';
+    if (props.stickyHeader)
+        attrs['sticky-header'] = '';
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.error != null)
+        attrs['error'] = typeof props.error === 'object' ? JSON.stringify(props.error) : String(props.error);
+    return (_jsx("cx-table", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Table.displayName = 'Table';

package/dist/generated/tabs.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { SelectDetail, TabItem } from './types.js';
+export interface TabsRef extends HTMLElement {
+    /** Focuses the active tab. */
+    focus(): void;
+}
+export interface TabsProps {
+    id?: string;
+    label?: string;
+    items?: TabItem[] | string;
+    defaultTab?: string;
+    variant?: 'underline' | 'enclosed' | 'pill';
+    orientation?: 'horizontal' | 'vertical';
+    width?: 'auto' | 'full';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onChange?: (event: CustomEvent<SelectDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsRef>>;

package/dist/generated/tabs.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Tabs = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onChangeRef.current?.(e);
+        el.addEventListener('cx-change', handler);
+        return () => el.removeEventListener('cx-change', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.width != null) {
+            el.setAttribute('width', String(props.width));
+        }
+        else {
+            el.removeAttribute('width');
+        }
+    }, [props.width]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.items != null) {
+            el.setAttribute('items', typeof props.items === 'object' ? JSON.stringify(props.items) : String(props.items));
+        }
+        else {
+            el.removeAttribute('items');
+        }
+    }, [props.items]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.defaultTab != null)
+        attrs['default-tab'] = typeof props.defaultTab === 'object' ? JSON.stringify(props.defaultTab) : String(props.defaultTab);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.orientation != null)
+        attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    return (_jsx("cx-tabs", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Tabs.displayName = 'Tabs';

package/dist/generated/text-input.d.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+export interface TextInputRef extends HTMLElement {
+    /** Focuses the inner input or textarea. */
+    focus(): void;
+    /** Blurs the inner input or textarea. */
+    blur(): void;
+    /** Selects all text in the input. */
+    select(): void;
+}
+export interface TextInputProps {
+    id?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Input type. Use `'multiline'` for textarea behavior with optional `rows` and `autoGrow`. */
+    kind?: 'text' | 'email' | 'password' | 'search' | 'multiline';
+    placeholder?: string;
+    /** Controlled value. Set via `onInput` callback: `onInput={(e) => setValue(e.detail.value)}`. */
+    value?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    prefixIcon?: string;
+    suffixIcon?: string;
+    passwordToggle?: boolean;
+    passwordVisible?: boolean;
+    name?: string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    autocomplete?: string;
+    rows?: number;
+    autoGrow?: boolean;
+    onInput?: (event: CustomEvent<InputDetail>) => void;
+    onChange?: (event: CustomEvent<InputDetail>) => void;
+    onFocus?: (event: CustomEvent<FocusDetail>) => void;
+    onBlur?: (event: CustomEvent<FocusDetail>) => void;
+    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<TextInputRef>>;

package/dist/generated/text-input.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const TextInput = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    const onInputRef = useRef(props.onInput);
+    onInputRef.current = props.onInput;
+    const onChangeRef = useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    const onFocusRef = useRef(props.onFocus);
+    onFocusRef.current = props.onFocus;
+    const onBlurRef = useRef(props.onBlur);
+    onBlurRef.current = props.onBlur;
+    const onKeydownRef = useRef(props.onKeydown);
+    onKeydownRef.current = props.onKeydown;
+    const onKeyupRef = useRef(props.onKeyup);
+    onKeyupRef.current = props.onKeyup;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onInputRef.current?.(e);
+        el.addEventListener('cx-input', handler);
+        return () => el.removeEventListener('cx-input', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onChangeRef.current?.(e);
+        el.addEventListener('cx-change', handler);
+        return () => el.removeEventListener('cx-change', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onFocusRef.current?.(e);
+        el.addEventListener('cx-focus', handler);
+        return () => el.removeEventListener('cx-focus', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onBlurRef.current?.(e);
+        el.addEventListener('cx-blur', handler);
+        return () => el.removeEventListener('cx-blur', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeydownRef.current?.(e);
+        el.addEventListener('cx-keydown', handler);
+        return () => el.removeEventListener('cx-keydown', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onKeyupRef.current?.(e);
+        el.addEventListener('cx-keyup', handler);
+        return () => el.removeEventListener('cx-keyup', handler);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.value != null) {
+            el.setAttribute('value', String(props.value));
+        }
+        else {
+            el.removeAttribute('value');
+        }
+    }, [props.value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.name != null) {
+            el.setAttribute('name', String(props.name));
+        }
+        else {
+            el.removeAttribute('name');
+        }
+    }, [props.name]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.minLength != null) {
+            el.setAttribute('min-length', String(props.minLength));
+        }
+        else {
+            el.removeAttribute('min-length');
+        }
+    }, [props.minLength]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.maxLength != null) {
+            el.setAttribute('max-length', String(props.maxLength));
+        }
+        else {
+            el.removeAttribute('max-length');
+        }
+    }, [props.maxLength]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.rows != null) {
+            el.setAttribute('rows', String(props.rows));
+        }
+        else {
+            el.removeAttribute('rows');
+        }
+    }, [props.rows]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.kind != null)
+        attrs['kind'] = typeof props.kind === 'object' ? JSON.stringify(props.kind) : String(props.kind);
+    if (props.placeholder != null)
+        attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+    if (props.helperText != null)
+        attrs['helper-text'] = typeof props.helperText === 'object' ? JSON.stringify(props.helperText) : String(props.helperText);
+    if (props.error != null)
+        attrs['error'] = typeof props.error === 'object' ? JSON.stringify(props.error) : String(props.error);
+    if (props.disabled)
+        attrs['disabled'] = '';
+    if (props.readonly)
+        attrs['readonly'] = '';
+    if (props.required)
+        attrs['required'] = '';
+    if (props.clearable)
+        attrs['clearable'] = '';
+    if (props.prefixIcon != null)
+        attrs['prefix-icon'] = typeof props.prefixIcon === 'object' ? JSON.stringify(props.prefixIcon) : String(props.prefixIcon);
+    if (props.suffixIcon != null)
+        attrs['suffix-icon'] = typeof props.suffixIcon === 'object' ? JSON.stringify(props.suffixIcon) : String(props.suffixIcon);
+    if (props.passwordToggle)
+        attrs['password-toggle'] = '';
+    if (props.passwordVisible)
+        attrs['password-visible'] = '';
+    if (props.pattern != null)
+        attrs['pattern'] = typeof props.pattern === 'object' ? JSON.stringify(props.pattern) : String(props.pattern);
+    if (props.autocomplete != null)
+        attrs['autocomplete'] = typeof props.autocomplete === 'object' ? JSON.stringify(props.autocomplete) : String(props.autocomplete);
+    if (props.autoGrow)
+        attrs['auto-grow'] = '';
+    return (_jsx("cx-text-input", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+TextInput.displayName = 'TextInput';

package/dist/generated/text.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+export interface TextProps {
+    id?: string;
+    role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
+    align?: 'start' | 'center' | 'end';
+    color?: 'primary' | 'inverse' | 'muted';
+    muted?: boolean;
+    strong?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    underlineStrong?: boolean;
+    truncate?: boolean;
+    lineClamp?: number;
+    balance?: boolean;
+    prose?: boolean;
+    elementAs?: string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/text.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+export const Text = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.role != null) {
+            el.setAttribute('role', String(props.role));
+        }
+        else {
+            el.removeAttribute('role');
+        }
+    }, [props.role]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.align != null) {
+            el.setAttribute('align', String(props.align));
+        }
+        else {
+            el.removeAttribute('align');
+        }
+    }, [props.align]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.color != null) {
+            el.setAttribute('color', String(props.color));
+        }
+        else {
+            el.removeAttribute('color');
+        }
+    }, [props.color]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.lineClamp != null) {
+            el.setAttribute('line-clamp', String(props.lineClamp));
+        }
+        else {
+            el.removeAttribute('line-clamp');
+        }
+    }, [props.lineClamp]);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.muted)
+        attrs['muted'] = '';
+    if (props.strong)
+        attrs['strong'] = '';
+    if (props.italic)
+        attrs['italic'] = '';
+    if (props.underline)
+        attrs['underline'] = '';
+    if (props.underlineStrong)
+        attrs['underline-strong'] = '';
+    if (props.truncate)
+        attrs['truncate'] = '';
+    if (props.balance)
+        attrs['balance'] = '';
+    if (props.prose)
+        attrs['prose'] = '';
+    if (props.elementAs != null)
+        attrs['element-as'] = typeof props.elementAs === 'object' ? JSON.stringify(props.elementAs) : String(props.elementAs);
+    return (_jsx("cx-text", { ref: ref, ...attrs, className: props.className, style: props.style, children: props.children }));
+});
+Text.displayName = 'Text';

package/dist/generated/thinking.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface ThinkingProps {
+    id?: string;
+    variant?: 'ghost' | 'filled';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    speed?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Thinking: React.ForwardRefExoticComponent<ThinkingProps & React.RefAttributes<HTMLElement>>;

package/dist/generated/thinking.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+export const Thinking = forwardRef((props, forwardedRef) => {
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    // Build attribute object
+    const attrs = {};
+    if (props.id != null)
+        attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+    if (props.variant != null)
+        attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+    if (props.shape != null)
+        attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+    if (props.label != null)
+        attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+    if (props.size != null)
+        attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+    if (props.speed != null)
+        attrs['speed'] = typeof props.speed === 'object' ? JSON.stringify(props.speed) : String(props.speed);
+    return (_jsx("cx-thinking", { ref: ref, ...attrs, className: props.className, style: props.style }));
+});
+Thinking.displayName = 'Thinking';

package/dist/generated/toast.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+import type { DismissDetail } from './types.js';
+export interface ToastRef extends HTMLElement {
+    /** Dismisses the toast with exit animation. */
+    dismiss(): void;
+}
+export interface ToastProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    variant?: 'subtle' | 'filled' | 'outline';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showIcon?: boolean;
+    icon?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    duration?: number;
+    onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+    action?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;