@apple-pie/slice 0.0.6 → 0.0.8

package/dist/esm/chunks/sharedTypes-BfZzG1KX.js

@@ -1,9 +0,0 @@
-var ToolTipType;
-(function (ToolTipType) {
-    ToolTipType["menu"] = "menu";
-    ToolTipType["button"] = "button";
-    ToolTipType["general"] = "general";
-    ToolTipType["other"] = "other";
-})(ToolTipType || (ToolTipType = {}));
-
-export { ToolTipType as T };

package/dist/esm/chunks/style-inject.es-tgCJW-Cu.js

@@ -1,28 +0,0 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as s };

package/dist/esm/chunks/tipStore-nBYJ6tmE.js

@@ -1,17 +0,0 @@
-import { create } from 'zustand';
-
-const useTipStore = create((set) => ({
-    tip: null,
-    actions: {
-        push: (tip) => set({ tip }),
-        clear: () => set({ tip: null }),
-    },
-}));
-// atomic hook exports for use in React components
-const useTip = () => useTipStore((state) => state.tip);
-const useTipActions = () => useTipStore((state) => state.actions);
-// non-reactive imperative exports for use outside the React context
-const tipActions = useTipStore.getState().actions;
-const getTip = () => useTipStore.getState().tip;
-
-export { useTipActions as a, useTipStore as b, getTip as g, tipActions as t, useTip as u };

package/dist/esm/chunks/toastStore-r3pvNa28.js

@@ -1,17 +0,0 @@
-import { create } from 'zustand';
-
-const useToastStore = create((set) => ({
-    toast: null,
-    actions: {
-        push: (toast) => set({ toast }),
-        clear: () => set({ toast: null }),
-    },
-}));
-// atomic hook exports for use in React components
-const useToast = () => useToastStore((state) => state.toast);
-const useToastActions = () => useToastStore((state) => state.actions);
-// non-reactive imperative exports for use outside the React context
-const toastActions = useToastStore.getState().actions;
-const getToast = () => useToastStore.getState().toast;
-
-export { useToastActions as a, useToastStore as b, getToast as g, toastActions as t, useToast as u };

package/dist/esm/chunks/tslib.es6-0pkUdtrF.js

@@ -1,45 +0,0 @@
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-export { __rest as _, __awaiter as a };

package/dist/esm/chunks/utils-CZ1LWeN6.js

@@ -1,121 +0,0 @@
-import './tslib.es6-0pkUdtrF.js';
-
-/**
- * Clean up string with html
- */
-function cleanString(input, removeInvisible = true, removeHtml = true) {
-    let clean = input;
-    const scriptsRegEx = /\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
-    clean = clean.replaceAll(scriptsRegEx, '');
-    if (removeInvisible) {
-        const invisibleRegEx = /[\r\n\t]/gi;
-        clean = clean.replaceAll(invisibleRegEx, '');
-    }
-    if (removeHtml) {
-        const htmlRegEx = /<\/?[a-z][^>]*>/gi;
-        clean = clean.replaceAll(htmlRegEx, '');
-    }
-    return clean;
-}
-/**
- * Debug component rendering
- * Code removed when built / deployed
- */
-function debug(previous, updated, name = 'component') {
-    if (process.env.NODE_ENV === 'test')
-        return; // exit if running tests
-    const props = previous.current.props;
-    const mount = previous.current.mount;
-    const unmount = previous.current.unmount;
-    if (mount) {
-        console.log({
-            component: name,
-            '(re)render': true,
-            event: 'Component Mount',
-        });
-    }
-    else if (unmount) {
-        console.log({
-            component: name,
-            '(re)render': false,
-            event: 'Component Unmount',
-        });
-    }
-    else {
-        const reasons = createPropChangeArray(props, updated);
-        console.log({
-            component: name,
-            '(re)render': true,
-            event: 'Props Change',
-            props: reasons,
-        });
-    }
-    return { props: updated, mount: false, unmount: false };
-}
-function createPropChangeArray(props, updated) {
-    const reasons = [];
-    for (const key of Object.keys(updated)) {
-        if (updated[key] !== props[key]) {
-            try {
-                const propName = `${key}:`;
-                const prev = JSON.stringify(props[key]);
-                const next = JSON.stringify(updated[key]);
-                const valueChanged = `${prev} > ${next}`;
-                reasons.push(`${propName} ${valueChanged}`);
-            }
-            catch (error) {
-                let message = 'Unknown error';
-                if (error instanceof Error)
-                    message = error.message;
-                if (typeof error === 'string')
-                    message = error;
-                reasons.push(`${key} ${message}`);
-            }
-        }
-    }
-    return reasons;
-}
-/**
- * Utility to accessibility - mimics click event with designated keys event
- */
-function accessibleKeyDown(e, clickFunction, keys) {
-    const activateWith = ['Enter', ' '];
-    const match = activateWith.includes(e.key);
-    if (match) {
-        e.preventDefault();
-        clickFunction();
-    }
-}
-/**
- * Get the pointer position from a DOM touch or mouse event
- */
-function pointerPosition(e) {
-    if (e.type.startsWith('touch')) {
-        const touchEvent = e;
-        return touchEvent.touches[0].clientX;
-    }
-    const mouseEvent = e;
-    return mouseEvent.clientX;
-}
-/**
- * Filter and trim class name array
- */
-function filterClasses(classNames) {
-    return classNames
-        .filter((item) => item !== '')
-        .join(' ')
-        .trim();
-}
-/**
- * Takes a style string or number and returns a valid CSS style string
- */
-function setStyle(value, defaultVal = undefined) {
-    const useValue = value !== null && value !== void 0 ? value : defaultVal;
-    if (!useValue)
-        return 'unset';
-    if (typeof useValue === 'string')
-        return useValue;
-    return `${useValue}px`;
-}
-
-export { accessibleKeyDown as a, cleanString as c, debug as d, filterClasses as f, pointerPosition as p, setStyle as s };

package/dist/esm/chunks/windowStore-Cu4W4zJM.js

@@ -1,91 +0,0 @@
-import { create } from 'zustand';
-
-/**
- * Form factor names
- */
-var FormFactor;
-(function (FormFactor) {
-    FormFactor["Mobile"] = "mobile";
-    FormFactor["Tablet"] = "tablet";
-    FormFactor["Desktop"] = "desktop";
-    FormFactor["DesktopL"] = "desktopL";
-    FormFactor["DesktopXL"] = "desktopXL";
-})(FormFactor || (FormFactor = {}));
-/**
- * Use bootstrap breakpoints
- */
-const bootstrapBreakPoints = {
-    [FormFactor.Mobile]: 576,
-    [FormFactor.Tablet]: 768,
-    [FormFactor.Desktop]: 992,
-    [FormFactor.DesktopL]: 1200,
-    [FormFactor.DesktopXL]: 1400,
-};
-
-// pre-ordered break points from larget to smallest
-const orderedBps = Object.entries(bootstrapBreakPoints).sort((a, b) => -b[1] - a[1]);
-// get form factor from break point and current viewport width
-const getFormFactor = (width) => {
-    if (!width || width <= 0)
-        return FormFactor.Mobile;
-    for (const [formFactor, breakpoint] of orderedBps) {
-        if (width >= breakpoint)
-            return formFactor;
-    }
-    return FormFactor.Mobile;
-};
-const initialSize = processWindowSize();
-const useWindowStore = create((set, get) => {
-    var _a;
-    return ({
-        formFactor: initialSize.formFactor,
-        viewportWidth: initialSize.viewportWidth,
-        viewportHeight: initialSize.viewportHeight,
-        height: initialSize.height,
-        isElectron: checkElectron(),
-        isAppleDevice: navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone',
-        isTouchDevice: 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0,
-        dpr: (_a = Math.min(Math.ceil(window.devicePixelRatio), 3)) !== null && _a !== void 0 ? _a : 1,
-        actions: {
-            initialize: () => {
-                var _a;
-                const win = (_a = globalThis.top) !== null && _a !== void 0 ? _a : globalThis;
-                win === null || win === void 0 ? void 0 : win.addEventListener('resize', handleResize);
-                return () => win === null || win === void 0 ? void 0 : win.removeEventListener('resize', handleResize);
-            },
-        },
-    });
-});
-//check electron
-function checkElectron() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    return userAgent.includes('electron/');
-}
-// resize handler
-function handleResize() {
-    // process size
-    const { formFactor, viewportWidth, viewportHeight, height } = processWindowSize();
-    // update store directly
-    useWindowStore.setState({
-        formFactor,
-        viewportWidth,
-        viewportHeight,
-        height,
-    });
-}
-// return size related store values
-function processWindowSize(top = true) {
-    var _a, _b, _c;
-    const viewport = (_a = globalThis.top) !== null && _a !== void 0 ? _a : globalThis;
-    const touch = 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0;
-    const windowWidth = (_b = viewport === null || viewport === void 0 ? void 0 : viewport.innerWidth) !== null && _b !== void 0 ? _b : -1;
-    const windowHeight = (_c = viewport === null || viewport === void 0 ? void 0 : viewport.innerHeight) !== null && _c !== void 0 ? _c : -1;
-    return {
-        formFactor: getFormFactor(windowWidth),
-        viewportWidth: windowWidth,
-        viewportHeight: windowHeight,
-        height: viewport && touch ? `${windowHeight}px` : '100vh',
-    };
-}
-
-export { FormFactor as F, useWindowStore as u };

package/dist/esm/hooks/useDoubleClick.js

@@ -1,24 +0,0 @@
-import { useRef } from 'react';
-
-function useDoubleClick(onClick, onDblClick, delay = 200) {
-    const timer = useRef(null);
-    const didClick = (payload) => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        timer.current = setTimeout(() => {
-            onClick(payload);
-        }, delay);
-        return () => {
-            if (timer.current)
-                clearTimeout(timer.current);
-        };
-    };
-    const didDblClick = (payload) => {
-        if (timer.current)
-            clearTimeout(timer.current);
-        onDblClick(payload);
-    };
-    return [didClick, didDblClick];
-}
-
-export { useDoubleClick };

package/dist/esm/hooks/useKeyboardShortcuts.js

@@ -1,42 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-function useKeyboardShortcuts(shortcuts, shortCutHandler, isAppleDevice) {
-    // don't process shortcuts on editable elements, like inputs, editable divs, etc.
-    const isEditable = useCallback((e) => {
-        const target = e.target;
-        if (target) {
-            const tag = target.tagName;
-            return (target.isContentEditable ||
-                tag === 'INPUT' ||
-                tag === 'TEXTAREA' ||
-                tag === 'SELECT');
-        }
-        return false;
-    }, []);
-    // get keyboard event check if it's a shortcut
-    const handleKeyPress = useCallback((e) => {
-        if (isEditable(e))
-            return;
-        const isMeta = (isAppleDevice && e.metaKey) || (!isAppleDevice && e.ctrlKey);
-        for (const s of shortcuts) {
-            if (s.metaPressed && !isMeta)
-                continue;
-            if (s.key.toLowerCase() === e.key.toLowerCase()) {
-                e.preventDefault();
-                shortCutHandler(s);
-                break;
-            }
-        }
-    }, [isAppleDevice, shortcuts, shortCutHandler, isEditable]);
-    // set keyboard listener
-    useEffect(() => {
-        if (shortcuts.length === 0)
-            return;
-        globalThis.addEventListener('keydown', handleKeyPress, false);
-        return () => {
-            globalThis.removeEventListener('keydown', handleKeyPress, false);
-        };
-    }, [shortcuts, handleKeyPress]);
-}
-
-export { useKeyboardShortcuts };

package/dist/esm/hooks/useLastUpdated.js

@@ -1,51 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function getTimeDifference(date, labelPrefix) {
-    const compareDate = date instanceof Date ? date : new Date(date);
-    if (Number.isNaN(compareDate.getTime()))
-        return `${labelPrefix}Invalid date`;
-    // getTime = milliseconds since Jan 1 1970 UTC
-    const secondsDiff = Math.max(0, Math.floor((Date.now() - compareDate.getTime()) / 1000));
-    const minutes = Math.floor(secondsDiff / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    if (minutes < 1)
-        return `${labelPrefix}Just now`;
-    if (minutes === 1)
-        return `${labelPrefix}1 min. ago`;
-    if (minutes < 60)
-        return `${labelPrefix}${minutes} mins. ago`;
-    if (hours === 1)
-        return `${labelPrefix}1 hour ago`;
-    if (hours < 24)
-        return `${labelPrefix}${hours} hours ago`;
-    if (days === 1)
-        return `${labelPrefix}1 day ago`;
-    if (days < 15)
-        return `${labelPrefix}${days} days ago`;
-    return compareDate.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
-    });
-}
-function useLastUpdated(timestamp, prefix = '', interval = 1) {
-    const [lastUpdated, setLastUpdated] = useState(timestamp ? getTimeDifference(timestamp, prefix) : '');
-    useEffect(() => {
-        if (!timestamp) {
-            setLastUpdated('');
-            return;
-        }
-        setLastUpdated(getTimeDifference(timestamp, prefix));
-        const refreshMinutes = Math.max(interval, 1);
-        const intervalTimer = setInterval(() => {
-            setLastUpdated(getTimeDifference(timestamp, prefix));
-        }, refreshMinutes * 60 * 1000);
-        return () => {
-            clearInterval(intervalTimer);
-        };
-    }, [interval, prefix, timestamp]);
-    return { lastUpdated, timer: interval };
-}
-
-export { useLastUpdated };

package/dist/esm/hooks/useLocalStore.js

@@ -1,50 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function canUseLocalStorage() {
-    return (typeof globalThis !== 'undefined' &&
-        'localStorage' in globalThis &&
-        globalThis.localStorage !== undefined &&
-        globalThis.localStorage !== null);
-}
-function readLocalStorageValue(key, fallback) {
-    if (!canUseLocalStorage())
-        return fallback;
-    try {
-        const raw = globalThis.localStorage.getItem(key);
-        if (raw === null) {
-            // If not set, initialize with fallback.
-            globalThis.localStorage.setItem(key, JSON.stringify(fallback));
-            return fallback;
-        }
-        return JSON.parse(raw);
-    }
-    catch (error) {
-        console.error(`Error parsing local storage item for key ${key}:`, {
-            error,
-        });
-        return fallback;
-    }
-}
-function useLocalStore(key, value) {
-    const [item, setItem] = useState(() => readLocalStorageValue(key, value));
-    // rehydrate on prop changes
-    useEffect(() => {
-        setItem(readLocalStorageValue(key, value));
-    }, [key, value]);
-    function updateItem(data) {
-        if (canUseLocalStorage()) {
-            try {
-                globalThis.localStorage.setItem(key, JSON.stringify(data));
-            }
-            catch (error) {
-                console.error(`Error setting local storage item for key ${key}:`, {
-                    error,
-                });
-            }
-        }
-        setItem(data);
-    }
-    return [item, updateItem];
-}
-
-export { useLocalStore };

package/dist/esm/hooks/useObserveResize.js

@@ -1,54 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-function useObserveResize(element, options) {
-    const [size, setSize] = useState({ width: 0, height: 0 });
-    const ignore = options === null || options === void 0 ? void 0 : options.ignore;
-    const handleResize = useCallback((entries) => {
-        var _a, _b;
-        if (!entries[0])
-            return;
-        const width = ((_a = element === null || element === void 0 ? void 0 : element.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
-        const height = ((_b = element === null || element === void 0 ? void 0 : element.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
-        setSize((prev) => {
-            const next = {
-                width: ignore === 'width' ? prev.width : width,
-                height: ignore === 'height' ? prev.height : height,
-            };
-            if (prev.width === next.width && prev.height === next.height) {
-                return prev;
-            }
-            return next;
-        });
-    }, [element, ignore]);
-    useEffect(() => {
-        if (element === undefined)
-            return;
-        const el = element.current;
-        if (!el)
-            return;
-        // Get initial size
-        const newWidth = el.offsetWidth || 0;
-        const newHeight = el.offsetHeight || 0;
-        // set the new size of different to previous
-        setSize((prev) => {
-            const next = {
-                width: ignore === 'width' ? prev.width : newWidth,
-                height: ignore === 'height' ? prev.height : newHeight,
-            };
-            if (prev.width === next.width && prev.height === next.height) {
-                return prev; // same so no need to trigger re-renders
-            }
-            return next;
-        });
-        // Observe size changes
-        const resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(el);
-        return () => {
-            resizeObserver.unobserve(el);
-            resizeObserver.disconnect();
-        };
-    }, [element, handleResize, ignore]);
-    return size;
-}
-
-export { useObserveResize };

package/dist/esm/hooks/useObserveTheme.js

@@ -1,41 +0,0 @@
-import { useState, useEffect } from 'react';
-import { lightTheme, darkTheme } from '../theme/themes.js';
-import '../theme/colors.js';
-import '../theme/corners.js';
-import '../theme/elevations.js';
-import '../theme/type.js';
-
-function resolveTheme(themeName) {
-    if (!themeName || themeName === '' || themeName.includes(lightTheme.name)) {
-        return lightTheme;
-    }
-    return darkTheme;
-}
-function useObserveTheme() {
-    const [theme, setTheme] = useState(() => {
-        if (typeof document === 'undefined')
-            return lightTheme;
-        return resolveTheme(document.documentElement.dataset.theme);
-    });
-    useEffect(() => {
-        // Sync once on mount in case the theme was set before this hook subscribed.
-        setTheme(resolveTheme(document.documentElement.dataset.theme));
-        const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' &&
-                    mutation.attributeName === 'data-theme') {
-                    const newTheme = document.documentElement.dataset.theme;
-                    setTheme(resolveTheme(newTheme));
-                }
-            }
-        });
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme'],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return theme;
-}
-
-export { useObserveTheme };

package/dist/esm/hooks/useTheme.js

@@ -1,84 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { darkTheme, lightTheme } from '../theme/themes.js';
-import { colorClass, colorCssVars } from '../theme/colors.js';
-import { typeStyles, typeCssClasses } from '../theme/type.js';
-import { useObserveTheme } from './useObserveTheme.js';
-import '../theme/corners.js';
-import '../theme/elevations.js';
-
-/**
- * Hook to manage Slice theming
- */
-function useTheme() {
-    const current = useObserveTheme();
-    const set = useCallback((newTheme) => {
-        console.log('set theme', newTheme);
-        let theme;
-        if (typeof newTheme === 'string') {
-            if (newTheme === 'system') {
-                const darkModeMediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
-                const isDark = darkModeMediaQuery.matches;
-                theme = isDark ? darkTheme : lightTheme;
-            }
-            else {
-                theme = newTheme === darkTheme.name ? darkTheme : lightTheme;
-            }
-        }
-        else
-            theme = newTheme;
-        document.documentElement.dataset.theme = theme.name;
-    }, []);
-    const toggle = () => {
-        const lightMode = current.name === lightTheme.name;
-        const newTheme = lightMode ? darkTheme : lightTheme;
-        document.documentElement.dataset.theme = newTheme.name;
-    };
-    const isDark = useMemo(() => {
-        return current.name === darkTheme.name;
-    }, [current]);
-    return {
-        /**
-         * Slice's default dark theme
-         */
-        darkTheme,
-        /**
-         * Slice's default light theme
-         */
-        lightTheme,
-        /**
-         * The currently active SliceTheme
-         */
-        current,
-        /**
-         * CSS variables for theme colors
-         */
-        colors: colorCssVars,
-        /**
-         * CSS Class names for the theme colors
-         */
-        colorsClass: colorClass,
-        /**
-         * CSS class names for theme typefaces
-         */
-        typeClass: typeCssClasses,
-        /**
-         * CSS typeface styles as inline style properties
-         */
-        typeStyle: typeStyles,
-        /**
-         * Set a new theme by name or passing in a SliceTheme object
-         * @param newTheme
-         */
-        set,
-        /**
-         * Toggle between light and dark themes
-         */
-        toggle,
-        /**
-         * If the currently active theme is the Slice's default dark theme'
-         */
-        isDark,
-    };
-}
-
-export { useTheme };