@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/lib/components/Toast/variables.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
+const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
+exports.toast = (0, styled_components_1.css) `
+  /**
+    * @tokens Toast
+    * @presenter BoxShadow
+    */
+
+  --toast-box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.04), 2px 2px 24px 8px rgba(0, 0, 0, 0.04);
+
+  /**
+    * @tokens Toast surface
+    */
+  --toast-min-width: 240px;
+  --toast-max-width: 360px;
+  --toast-bg-color: var(--layer-color); // @presenter Color
+  --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
+  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-font-family: var(--font-family-base); // @presenter FontFamily
+
+  /**
+    * @tokens Toast spacing
+    */
+  --toast-simple-gap: var(--spacing-unit);
+  --toast-simple-padding: var(--spacing-xs) var(--spacing-sm);
+  --toast-detailed-padding: var(--spacing-sm);
+  --toast-content-gap: var(--spacing-xs);
+  --toast-title-gap: var(--spacing-xs);
+  --toast-description-gap: var(--spacing-xs);
+
+  /**
+    * @tokens Toast icon
+    */
+  --toast-icon-size: 14px;
+  --toast-icon-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-icon-color-info: var(--color-info-base); // @presenter Color
+  --toast-icon-color-success: var(--color-success-base); // @presenter Color
+  --toast-icon-color-warning: var(--color-warning-base); // @presenter Color
+  --toast-icon-color-error: var(--color-error-base); // @presenter Color
+  --toast-icon-color-loading: var(--loading-spinner-color); // @presenter Color
+  --toast-loading-animation-duration: 3s;
+
+  /**
+    * @tokens Toast typography
+    */
+  --toast-text-font-size: var(--font-size-base); // @presenter FontSize
+  --toast-text-line-height: var(--line-height-base); // @presenter LineHeight
+  --toast-text-color: var(--text-color-primary); // @presenter Color
+  --toast-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --toast-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+    * @tokens Toast close button
+    */
+  --toast-close-button-padding: 3px;
+  --toast-close-button-icon-size: 14px;
+  --toast-close-button-icon-color: var(--icon-color-secondary); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Tooltip/JsTooltip.js

@@ -269,7 +269,7 @@ const TooltipBody = styled_components_1.default.span `
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 
-  width: ${({ width }) => width || 'auto'};
+  width: ${({ width }) => width || 'max-content'};
   ${({ placement }) => (0, styled_components_1.css) `
     ${PLACEMENTS[placement]};
   `}

package/lib/core/constants/catalog.d.ts

@@ -1,5 +1,5 @@
 import type { EntityRelationType } from '../types/catalog';
-export declare const CATALOG_TAG_MAX_LENGTH = 15;
+export declare const CATALOG_TAG_MAX_LENGTH = 12;
 export declare const PREDEFINED_ENTITY_TYPES: string[];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
 export declare const relationTypeMap: Record<EntityRelationType, string>;

package/lib/core/constants/catalog.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION_NOT_SPECIFIED = exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
-exports.CATALOG_TAG_MAX_LENGTH = 15;
+exports.CATALOG_TAG_MAX_LENGTH = 12;
 exports.PREDEFINED_ENTITY_TYPES = [
     'service',
     'domain',

package/lib/core/constants/toast.d.ts

@@ -0,0 +1 @@
+export declare const TOAST_SLIDE_DURATION_MS = 300;

package/lib/core/constants/toast.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOAST_SLIDE_DURATION_MS = void 0;
+exports.TOAST_SLIDE_DURATION_MS = 300;
+//# sourceMappingURL=toast.js.map

package/lib/core/contexts/Toast/ToastContext.d.ts

@@ -0,0 +1,2 @@
+import type { ToastContextValue } from '../../../core/types';
+export declare const ToastContext: import("react").Context<ToastContextValue | null>;

package/lib/core/contexts/Toast/ToastContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContext = void 0;
+const react_1 = require("react");
+exports.ToastContext = (0, react_1.createContext)(null);
+//# sourceMappingURL=ToastContext.js.map

package/lib/core/contexts/Toast/ToastProvider.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { ToastProviderProps } from '../../../core/types/toast';
+export declare function ToastProvider({ children, mountId }: ToastProviderProps): ReactElement;

package/lib/core/contexts/Toast/ToastProvider.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastProvider = ToastProvider;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const Portal_1 = require("../../../components/Portal/Portal");
+const Toast_1 = require("../../../components/Toast/Toast");
+const ToastContext_1 = require("../../../core/contexts/Toast/ToastContext");
+const toast_1 = require("../../../core/constants/toast");
+function toastReducer(state, action) {
+    switch (action.type) {
+        case 'add':
+            return [action.payload, ...state];
+        case 'startExit':
+            return state.map((toast) => toast.id === action.payload.id ? Object.assign(Object.assign({}, toast), { isExiting: true }) : toast);
+        case 'remove':
+            return state.filter((toast) => toast.id !== action.payload.id);
+        case 'update':
+            return state.map((toast) => {
+                var _a;
+                return toast.id === action.payload.id
+                    ? Object.assign(Object.assign(Object.assign({}, toast), action.payload.updates), { type: (_a = action.payload.updates.type) !== null && _a !== void 0 ? _a : toast.type }) : toast;
+            });
+        default:
+            return state;
+    }
+}
+function getToastType(type) {
+    return type !== null && type !== void 0 ? type : 'info';
+}
+function createToastId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+function ToastProvider({ children, mountId }) {
+    const [toasts, dispatch] = (0, react_1.useReducer)(toastReducer, []);
+    const toastsRef = (0, react_1.useRef)([]);
+    const removeTimeoutsRef = (0, react_1.useRef)(new Map());
+    (0, react_1.useEffect)(() => {
+        toastsRef.current = toasts;
+    }, [toasts]);
+    (0, react_1.useEffect)(() => {
+        const timeoutsMap = removeTimeoutsRef.current;
+        return () => {
+            timeoutsMap.forEach((timeoutId) => {
+                clearTimeout(timeoutId);
+            });
+            timeoutsMap.clear();
+        };
+    }, []);
+    const dismissToast = (0, react_1.useCallback)((id) => {
+        var _a;
+        const currentToast = toastsRef.current.find((toast) => toast.id === id);
+        if (!currentToast || currentToast.isExiting) {
+            return;
+        }
+        (_a = currentToast.onClose) === null || _a === void 0 ? void 0 : _a.call(currentToast);
+        dispatch({ type: 'startExit', payload: { id } });
+        const existingTimeout = removeTimeoutsRef.current.get(id);
+        if (existingTimeout) {
+            clearTimeout(existingTimeout);
+        }
+        const timeoutId = setTimeout(() => {
+            dispatch({ type: 'remove', payload: { id } });
+            removeTimeoutsRef.current.delete(id);
+        }, toast_1.TOAST_SLIDE_DURATION_MS);
+        removeTimeoutsRef.current.set(id, timeoutId);
+    }, []);
+    const showToast = (0, react_1.useCallback)((options) => {
+        const id = createToastId();
+        dispatch({
+            type: 'add',
+            payload: Object.assign(Object.assign({}, options), { id, type: getToastType(options.type), isExiting: false }),
+        });
+        return id;
+    }, []);
+    const updateToast = (0, react_1.useCallback)((id, updates) => {
+        dispatch({
+            type: 'update',
+            payload: {
+                id,
+                updates,
+            },
+        });
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        showToast,
+        dismissToast,
+        updateToast,
+    }), [dismissToast, showToast, updateToast]);
+    return (react_1.default.createElement(ToastContext_1.ToastContext.Provider, { value: contextValue },
+        children,
+        toasts.length > 0 ? (react_1.default.createElement(Portal_1.Portal, { mountId: mountId },
+            react_1.default.createElement(ToastViewport, { "aria-label": "Notifications" }, toasts.map((toast, index) => (react_1.default.createElement(Toast_1.Toast, { key: toast.id, stackIndex: index, stackZIndex: toasts.length - index, toast: toast, onDismiss: dismissToast })))))) : null));
+}
+const ToastViewport = styled_components_1.default.div `
+  position: fixed;
+  right: var(--spacing-md);
+  bottom: var(--spacing-md);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-sm);
+  width: 320px;
+  min-width: 240px;
+  max-width: 360px;
+  pointer-events: none;
+
+  @media (max-width: 480px) {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: calc(100vw - var(--spacing-md) * 2);
+    min-width: 0;
+    max-width: none;
+  }
+`;
+//# sourceMappingURL=ToastProvider.js.map

package/lib/core/contexts/index.d.ts

@@ -3,3 +3,5 @@ export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';
 export * from './SearchContext';
+export * from './Toast/ToastContext';
+export * from './Toast/ToastProvider';

package/lib/core/contexts/index.js

@@ -19,4 +19,6 @@ __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), export
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 __exportStar(require("./CodeSnippetContext"), exports);
 __exportStar(require("./SearchContext"), exports);
+__exportStar(require("./Toast/ToastContext"), exports);
+__exportStar(require("./Toast/ToastProvider"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/catalog/use-catalog-entity-link.d.ts

@@ -0,0 +1,8 @@
+import type { EntitiesCatalogConfig } from '@redocly/config';
+export type EntityWithTypeAndKey = {
+    type?: string;
+    key?: string;
+};
+export declare function useCatalogEntityLink(entitiesCatalogConfig: EntitiesCatalogConfig | undefined): {
+    getEntityLink: (entity: EntityWithTypeAndKey) => string | undefined;
+};

package/lib/core/hooks/catalog/use-catalog-entity-link.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalogEntityLink = useCatalogEntityLink;
+const react_1 = require("react");
+function isEntityExcluded(excludes, entityKey) {
+    var _a;
+    return (_a = excludes === null || excludes === void 0 ? void 0 : excludes.some((ex) => ex.key === entityKey)) !== null && _a !== void 0 ? _a : false;
+}
+function doesCatalogIncludeEntityType(config, entityType) {
+    var _a, _b;
+    const hasNoIncludes = !config.includes || config.includes.length === 0;
+    if (hasNoIncludes)
+        return true;
+    return (_b = (_a = config.includes) === null || _a === void 0 ? void 0 : _a.some((inc) => inc.type === entityType)) !== null && _b !== void 0 ? _b : false;
+}
+function useCatalogEntityLink(entitiesCatalogConfig) {
+    const catalogEntries = (0, react_1.useMemo)(() => {
+        const catalogs = entitiesCatalogConfig === null || entitiesCatalogConfig === void 0 ? void 0 : entitiesCatalogConfig.catalogs;
+        if (!catalogs)
+            return [];
+        return Object.entries(catalogs)
+            .filter((entry) => entry[1] != null)
+            .sort(([keyA], [keyB]) => (keyA === 'all' ? 1 : 0) - (keyB === 'all' ? 1 : 0));
+    }, [entitiesCatalogConfig]);
+    const getEntityLink = (entity) => {
+        var _a, _b;
+        if (!(entity === null || entity === void 0 ? void 0 : entity.key))
+            return undefined;
+        const entityType = (_a = entity.type) !== null && _a !== void 0 ? _a : '';
+        for (const [catalogKey, config] of catalogEntries) {
+            if (isEntityExcluded(config.excludes, entity.key))
+                continue;
+            if (!doesCatalogIncludeEntityType(config, entityType))
+                continue;
+            const slug = (_b = config.slug) !== null && _b !== void 0 ? _b : catalogKey;
+            return `catalogs/${slug}/entities/${entity.key}`;
+        }
+        return undefined;
+    };
+    return { getEntityLink };
+}
+//# sourceMappingURL=use-catalog-entity-link.js.map

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.d.ts

@@ -1,10 +1,11 @@
 import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
+    currentSortOption?: string | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
-export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
+export declare function useCatalogTableHeaderCellActions<T extends BaseEntity>({ column, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellActionsProps<T>): {
     handleCellClick: () => void;
     sortKey: string | undefined;
     isUpActive: boolean;

package/lib/core/hooks/catalog/use-catalog-table-header-cell-actions.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalogTableHeaderCellActions = useCatalogTableHeaderCellActions;
-function useCatalogTableHeaderCellActions({ column, handleSortClick, isColumnSorted, }) {
+function useCatalogTableHeaderCellActions({ column, currentSortOption, handleSortClick, isColumnSorted, }) {
     const sortKey = column.sortKey;
-    const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
-    const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+    const isUpActive = Boolean(sortKey &&
+        (currentSortOption ? currentSortOption === sortKey : isColumnSorted(sortKey, 'desc')));
+    const isDownActive = Boolean(sortKey &&
+        (currentSortOption ? currentSortOption === `-${sortKey}` : isColumnSorted(sortKey, 'asc')));
     const handleCellClick = () => {
         if (!column.sortable || !sortKey)
             return;

package/lib/core/hooks/index.d.ts

@@ -46,7 +46,10 @@ export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
+export * from './catalog/use-catalog-entity-link';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
 export * from './use-store';
 export * from './use-is-truncated';
+export * from './use-toast';
+export * from './use-toast-logic';

package/lib/core/hooks/index.js

@@ -62,8 +62,11 @@ __exportStar(require("./use-page-actions"), exports);
 __exportStar(require("./use-mcp-config"), exports);
 __exportStar(require("./use-connect-mcp-button"), exports);
 __exportStar(require("./catalog/use-catalog-entity-details"), exports);
+__exportStar(require("./catalog/use-catalog-entity-link"), exports);
 __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
 __exportStar(require("./use-store"), exports);
 __exportStar(require("./use-is-truncated"), exports);
+__exportStar(require("./use-toast"), exports);
+__exportStar(require("./use-toast-logic"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-toast-logic.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type { ToastItem } from '../types/toast';
+interface UseToastLogicOptions {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    stackIndex: number;
+}
+interface UseToastLogicReturn {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    hasDetails: boolean;
+    dismissToast: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    ariaRole: 'alert' | 'status';
+    ariaLive: 'assertive' | 'polite';
+}
+export declare function useToastLogic({ toast, onDismiss, stackIndex, }: UseToastLogicOptions): UseToastLogicReturn;
+export {};

package/lib/core/hooks/use-toast-logic.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastLogic = useToastLogic;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const STACK_SHIFT_ENTER_DURATION_MS = 280;
+const STACK_SHIFT_EXIT_DURATION_MS = 200;
+function useToastLogic({ toast, onDismiss, stackIndex, }) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const previousTopRef = (0, react_1.useRef)(null);
+    const previousStackIndexRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)(null);
+    const startedAtRef = (0, react_1.useRef)(null);
+    const remainingTimeRef = (0, react_1.useRef)(0);
+    const animationFrameRef = (0, react_1.useRef)(null);
+    const isHoveredRef = (0, react_1.useRef)(false);
+    const hasDetails = Boolean(toast.description);
+    const resolvedDuration = (0, react_1.useMemo)(() => (0, utils_1.getAutoDismissDuration)(hasDetails, toast.type, toast.duration), [hasDetails, toast.duration, toast.type]);
+    const ariaRole = toast.type === 'error' ? 'alert' : 'status';
+    const ariaLive = toast.type === 'error' ? 'assertive' : 'polite';
+    const clearTimer = (0, react_1.useCallback)(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        startedAtRef.current = null;
+    }, []);
+    const dismissToast = (0, react_1.useCallback)(() => {
+        onDismiss(toast.id);
+    }, [onDismiss, toast.id]);
+    const startTimer = (0, react_1.useCallback)((delay) => {
+        clearTimer();
+        if (delay <= 0) {
+            dismissToast();
+            return;
+        }
+        remainingTimeRef.current = delay;
+        startedAtRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            dismissToast();
+        }, delay);
+    }, [clearTimer, dismissToast]);
+    (0, react_1.useEffect)(() => {
+        if (toast.isExiting || resolvedDuration === null) {
+            clearTimer();
+            return undefined;
+        }
+        if (!isHoveredRef.current) {
+            startTimer(resolvedDuration);
+        }
+        return () => {
+            clearTimer();
+        };
+    }, [
+        clearTimer,
+        resolvedDuration,
+        startTimer,
+        toast.description,
+        toast.isExiting,
+        toast.title,
+        toast.type,
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
+        const node = wrapperRef.current;
+        if (!node) {
+            return undefined;
+        }
+        node.style.transition = 'none';
+        node.style.transform = '';
+        const currentTop = node.getBoundingClientRect().top;
+        const previousTop = previousTopRef.current;
+        const previousStackIndex = previousStackIndexRef.current;
+        if (toast.isExiting) {
+            previousTopRef.current = currentTop;
+            previousStackIndexRef.current = stackIndex;
+            return () => {
+                if (animationFrameRef.current !== null) {
+                    window.cancelAnimationFrame(animationFrameRef.current);
+                    animationFrameRef.current = null;
+                }
+            };
+        }
+        const didStackIndexChange = previousStackIndex !== null && previousStackIndex !== stackIndex;
+        if (didStackIndexChange && previousTop !== null && previousTop !== currentTop) {
+            const delta = previousTop - currentTop;
+            const shiftDuration = delta > 0 ? STACK_SHIFT_ENTER_DURATION_MS : STACK_SHIFT_EXIT_DURATION_MS;
+            node.style.transform = `translateY(${delta}px)`;
+            node.getBoundingClientRect();
+            animationFrameRef.current = window.requestAnimationFrame(() => {
+                animationFrameRef.current = null;
+                if (!wrapperRef.current) {
+                    return;
+                }
+                wrapperRef.current.style.transition = `transform ${shiftDuration}ms ease-out`;
+                wrapperRef.current.style.transform = 'translateY(0)';
+            });
+        }
+        previousTopRef.current = currentTop;
+        previousStackIndexRef.current = stackIndex;
+        return () => {
+            if (animationFrameRef.current !== null) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearTimer();
+            if (animationFrameRef.current !== null) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [clearTimer]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        isHoveredRef.current = true;
+        if (resolvedDuration === null || startedAtRef.current === null) {
+            return;
+        }
+        const elapsed = Date.now() - startedAtRef.current;
+        remainingTimeRef.current = Math.max(remainingTimeRef.current - elapsed, 0);
+        clearTimer();
+    }, [clearTimer, resolvedDuration]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        isHoveredRef.current = false;
+        if (toast.isExiting || resolvedDuration === null) {
+            return;
+        }
+        startTimer(remainingTimeRef.current || resolvedDuration);
+    }, [resolvedDuration, startTimer, toast.isExiting]);
+    return {
+        wrapperRef,
+        hasDetails,
+        dismissToast,
+        handleMouseEnter,
+        handleMouseLeave,
+        ariaRole,
+        ariaLive,
+    };
+}
+//# sourceMappingURL=use-toast-logic.js.map

package/lib/core/hooks/use-toast.d.ts

@@ -0,0 +1,11 @@
+import type { ToastContextValue, ToastOptions } from '../types/toast';
+type TypedToastOptions = Omit<ToastOptions, 'title' | 'type'>;
+interface UseToastReturn extends ToastContextValue {
+    info: (title: string, options?: TypedToastOptions) => string;
+    success: (title: string, options?: TypedToastOptions) => string;
+    warning: (title: string, options?: TypedToastOptions) => string;
+    error: (title: string, options?: TypedToastOptions) => string;
+    loading: (title: string, options?: TypedToastOptions) => string;
+}
+export declare function useToast(): UseToastReturn;
+export {};

package/lib/core/hooks/use-toast.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = useToast;
+const react_1 = require("react");
+const ToastContext_1 = require("../contexts/Toast/ToastContext");
+function createTypedToast(showToast, type) {
+    return (title, options) => showToast(Object.assign(Object.assign({}, options), { title,
+        type }));
+}
+function useToast() {
+    const context = (0, react_1.useContext)(ToastContext_1.ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, context), { info: createTypedToast(context.showToast, 'info'), success: createTypedToast(context.showToast, 'success'), warning: createTypedToast(context.showToast, 'warning'), error: createTypedToast(context.showToast, 'error'), loading: createTypedToast(context.showToast, 'loading') })), [context]);
+}
+//# sourceMappingURL=use-toast.js.map

package/lib/core/styles/dark.d.ts

@@ -1 +1,3 @@
-export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
+export declare const darkMode: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    palette?: string;
+}, any>>;