@apple-pie/slice 0.0.5 → 0.0.7

package/dist/esm/chunks/Toast-ZxMZtbd0.js

@@ -1,156 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { AnimatePresence, motion } from 'motion/react';
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { useTheme } from '../hooks/useTheme.js';
-import '../theme/colors.js';
-import '../hooks/useWindow.js';
-import { s as setStyle, f as filterClasses, a as accessibleKeyDown } from './utils-CZ1LWeN6.js';
-import { I as Icon } from './_types-RJ7q8S0B.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__QWEzl {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__FxEAv {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__rf7AV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__8-FO- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__qyYq- {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__7GQ5Z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__Qtp5G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__Ieh9K {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__0lZ3I {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__Ar4d3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__6tV1n {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__I8Q1v {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__zDf-z {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__R5GpK {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__SI-hC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__jGIb2 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__QFgN8 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__tdBSi {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__-7Uyu {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__8hGYF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Cryjg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__PUi44 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__1B6fk {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Toast-module_wrapper__WglRd {\n\tpadding: var(--toast-padding) !important;\n\tcolor: var(--toast-color);\n\tposition: fixed;\n\tborder: var(--toast-border);\n\tborder-radius: var(--toast-border-radius);\n\tbackground: var(--toast-background);\n\tz-index: var(--elevation-status);\n\tgap: 16px;\n\tbox-shadow: var(--surface-shadow-soft);\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.Toast-module_close__fIkbN {\n\tmin-height: 20px;\n\tmax-height: 20px;\n\tmin-width: 20px;\n\tmax-width: 20px;\n}\n\n.Toast-module_s__eexrd {\n}\n\n.Toast-module_m__eByaG {\n}\n.Toast-module_l__t7hfh {\n}\n";
-var css = {"wrapper":"Toast-module_wrapper__WglRd flexBox-module_rowBetween__27lKK","close":"Toast-module_close__fIkbN flexBox-module_row__PWxbe","s":"Toast-module_s__eexrd type-module_body-s-regular__8-FO-","m":"Toast-module_m__eByaG type-module_body-m-regular__Qtp5G","l":"Toast-module_l__t7hfh type-module_body-l-regular__Ar4d3"};
-styleInject(css_248z);
-
-var ToastType;
-(function (ToastType) {
-    ToastType["Success"] = "success";
-    ToastType["Error"] = "error";
-    ToastType["Warning"] = "warning";
-    ToastType["Info"] = "info";
-})(ToastType || (ToastType = {}));
-
-const ToastBase = React.forwardRef((props, ref) => {
-    const { message = null, size = 'm', border = true, padding, radius = 8, showDelay = 0, duration = 5000, position = 'bottom', offset = 24, close = true, type = ToastType.Info, didHide = () => null } = props, divAttributes = __rest(props, ["message", "size", "border", "padding", "radius", "showDelay", "duration", "position", "offset", "close", "type", "didHide"]);
-    const theme = useTheme();
-    // div attributes to add
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? `${className}` : '';
-    // need the animate set only after the ready state is processed
-    const [ready, setReady] = useState(false);
-    const [content, setContent] = useState(null);
-    const timer = useRef(null);
-    // update show and animation
-    useEffect(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        const show = message && message.length > 0;
-        if (show) {
-            timer.current = setTimeout(() => {
-                setContent(message);
-                if (timer.current)
-                    clearTimeout(timer.current);
-                if (duration !== 'Infinite') {
-                    timer.current = setTimeout(() => {
-                        setReady(false);
-                    }, duration);
-                }
-            }, showDelay);
-        }
-        else {
-            setContent(null);
-        }
-        // clean up timers
-        return () => {
-            if (timer.current)
-                clearTimeout(timer.current);
-        };
-    }, [message, showDelay, duration]);
-    // ready to animate in/out
-    useEffect(() => setReady(content !== null), [content]);
-    // set the default padding accommodating the close icon fix
-    const defaultPadding = useMemo(() => {
-        return close ? '10px 12px 10px 16px' : '10px 16px';
-    }, [close]);
-    const colorScheme = useMemo(() => {
-        switch (type) {
-            case 'success':
-                return {
-                    border: 'var(--array-land-label)',
-                    bg: 'var(--array-land)',
-                    text: 'var(--array-land-label)',
-                };
-            case 'warning':
-                return {
-                    border: 'var(--array-orange-label)',
-                    bg: 'var(--array-orange)',
-                    text: 'var(--array-orange-label)',
-                };
-            case 'error':
-                return {
-                    border: 'var(--feedback-warning)',
-                    bg: 'var(--array-magenta)',
-                    text: 'var(--feedback-warning)',
-                };
-            default:
-                return {
-                    border: 'var(--core-outline-primary)',
-                    bg: 'var(--core-surface-secondary)',
-                    text: 'var(--core-text-primary)',
-                };
-        }
-    }, [type]);
-    // memo css vars
-    const cssVars = useMemo(() => {
-        return {
-            '--toast-padding': setStyle(padding, defaultPadding),
-            '--toast-background': colorScheme.bg,
-            '--toast-color': colorScheme.text,
-            '--toast-border': border ? `1px solid ${colorScheme.border}` : 'unset',
-            '--toast-border-radius': setStyle(radius, 4),
-        };
-    }, [padding, border, colorScheme, radius, defaultPadding]);
-    const variants = useMemo(() => {
-        const positionShow = position === 'bottom' ? { bottom: offset } : { top: offset };
-        const positionHide = position === 'bottom' ? { bottom: -offset } : { top: -offset };
-        const transition = { ease: 'easeInOut', duration: 0.25 };
-        return {
-            initial: Object.assign({ opacity: 0 }, positionHide),
-            animate: Object.assign(Object.assign({ opacity: 1 }, positionShow), { transition }),
-            exit: Object.assign(Object.assign({ opacity: 0 }, positionHide), { transition }),
-        };
-    }, [position, offset]);
-    // memo class names
-    const classNames = useMemo(() => {
-        return filterClasses([css.wrapper, css[size], divClass]);
-    }, [size, divClass]);
-    // hide on close
-    const handleClose = useCallback(() => {
-        setReady(false);
-    }, []);
-    // prevent hide on hover / focus
-    const handleMouseOver = useCallback(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-    }, []);
-    // rest hide on mouse out / blur
-    const handleMouseOut = useCallback(() => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        if (duration !== 'Infinite') {
-            timer.current = setTimeout(() => {
-                setContent(null);
-            }, duration);
-        }
-    }, [duration]);
-    // memo icon color based on type
-    const iconColor = useMemo(() => {
-        switch (type) {
-            case ToastType.Error:
-                return theme.current.colors['feedback-warning'];
-            case ToastType.Success:
-                return theme.current.colors['array-land-label'];
-            case ToastType.Warning:
-                return theme.current.colors['array-orange-label'];
-            default:
-                return theme.current.colors['core-text-primary'];
-        }
-    }, [type, theme]);
-    return (jsx(AnimatePresence, { onExitComplete: () => didHide(), initial: false, children: ready && (jsxs(motion.div, Object.assign({ ref: ref, id: divId, className: classNames }, rest, { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseOut, onFocus: handleMouseOver, onBlur: handleMouseOut, style: Object.assign(Object.assign(Object.assign({}, divStyle), cssVars), { visibility: ready ? 'visible' : 'hidden' }), variants: variants, initial: 'initial', animate: 'animate', exit: 'exit', children: [jsx("div", { role: 'status', "aria-live": 'polite', className: css.message, children: content }), (duration === 'Infinite' || close) && (jsx("div", { className: css.close, tabIndex: 0, role: 'button', "aria-label": 'dismiss message', onKeyDown: (e) => accessibleKeyDown(e, handleClose), onClick: handleClose, children: jsx(Icon, { name: 'x', size: 20, strokeColor: iconColor }) }))] }))) }));
-});
-ToastBase.displayName = 'Toast';
-const Toast = React.memo(ToastBase);
-
-export { Toast as T, ToastType as a };