@apple-pie/slice 0.0.1 → 0.0.3

package/dist/cjs/chunks/sharedTypes-BvTjh6M5.js

@@ -0,0 +1,9 @@
+'use strict';
+
+exports.ToolTipType = void 0;
+(function (ToolTipType) {
+    ToolTipType["menu"] = "menu";
+    ToolTipType["button"] = "button";
+    ToolTipType["general"] = "general";
+    ToolTipType["other"] = "other";
+})(exports.ToolTipType || (exports.ToolTipType = {}));

package/dist/cjs/chunks/style-inject.es-XZHJH68X.js

@@ -0,0 +1,30 @@
+'use strict';
+
+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));
+  }
+}
+
+exports.styleInject = styleInject;

package/dist/cjs/chunks/tipStore-C9oV9SIh.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var zustand = require('zustand');
+
+const useTipStore = zustand.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;
+
+exports.getTip = getTip;
+exports.tipActions = tipActions;
+exports.useTip = useTip;
+exports.useTipActions = useTipActions;
+exports.useTipStore = useTipStore;

package/dist/cjs/chunks/toastStore-C-ETP9H6.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var zustand = require('zustand');
+
+const useToastStore = zustand.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;
+
+exports.getToast = getToast;
+exports.toastActions = toastActions;
+exports.useToast = useToast;
+exports.useToastActions = useToastActions;
+exports.useToastStore = useToastStore;

package/dist/cjs/chunks/tslib.es6-4H29ixHs.js

@@ -0,0 +1,48 @@
+'use strict';
+
+/******************************************************************************
+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;
+};
+
+exports.__awaiter = __awaiter;
+exports.__rest = __rest;

package/dist/cjs/chunks/utils-CbayehuI.js

@@ -0,0 +1,126 @@
+'use strict';
+
+/**
+ * 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`;
+}
+
+exports.accessibleKeyDown = accessibleKeyDown;
+exports.cleanString = cleanString;
+exports.debug = debug;
+exports.filterClasses = filterClasses;
+exports.pointerPosition = pointerPosition;
+exports.setStyle = setStyle;

package/dist/cjs/hooks/useDoubleClick.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+function useDoubleClick(onClick, onDblClick, delay = 200) {
+    const timer = React.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];
+}
+
+exports.useDoubleClick = useDoubleClick;

package/dist/cjs/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+
+function useKeyboardShortcuts(shortcuts, shortCutHandler, isAppleDevice) {
+    // don't process shortcuts on editable elements, like inputs, editable divs, etc.
+    const isEditable = React.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 = React.useCallback((e) => {
+        if (isEditable(e))
+            return;
+        const isMeta = (isAppleDevice && e.metaKey) || (!isAppleDevice && e.ctrlKey);
+        for (const s of shortcuts) {
+            if (s.key.toLowerCase() === e.key.toLowerCase() && isMeta) {
+                e.preventDefault();
+                shortCutHandler(s);
+                break;
+            }
+        }
+    }, [isAppleDevice, shortcuts, shortCutHandler, isEditable]);
+    // set keyboard listener
+    React.useEffect(() => {
+        if (shortcuts.length === 0)
+            return;
+        globalThis.addEventListener('keydown', handleKeyPress, false);
+        return () => {
+            globalThis.removeEventListener('keydown', handleKeyPress, false);
+        };
+    }, [shortcuts, handleKeyPress]);
+}
+
+exports.useKeyboardShortcuts = useKeyboardShortcuts;

package/dist/cjs/hooks/useLastUpdated.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('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] = React.useState(timestamp ? getTimeDifference(timestamp, prefix) : '');
+    React.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 };
+}
+
+exports.useLastUpdated = useLastUpdated;

package/dist/cjs/hooks/useLocalStore.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('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] = React.useState(() => readLocalStorageValue(key, value));
+    // rehydrate on prop changes
+    React.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];
+}
+
+exports.useLocalStore = useLocalStore;

package/dist/cjs/hooks/useObserveResize.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+
+function useObserveResize(element, options) {
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const ignore = options === null || options === void 0 ? void 0 : options.ignore;
+    const handleResize = React.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]);
+    React.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;
+}
+
+exports.useObserveResize = useObserveResize;

package/dist/cjs/hooks/useObserveTheme.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var theme_themes = require('../theme/themes.js');
+require('../theme/colors.js');
+require('../theme/corners.js');
+require('../theme/elevations.js');
+require('../theme/type.js');
+
+function useObserveTheme() {
+    const [theme, setTheme] = React.useState(theme_themes.lightTheme);
+    React.useEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'data-theme') {
+                    const newTheme = document.documentElement.dataset.theme;
+                    if (!newTheme ||
+                        newTheme === '' ||
+                        newTheme.includes(theme_themes.lightTheme.name))
+                        setTheme(theme_themes.lightTheme);
+                    else {
+                        setTheme(theme_themes.darkTheme);
+                    }
+                }
+            }
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return theme;
+}
+
+exports.useObserveTheme = useObserveTheme;

package/dist/cjs/hooks/useTheme.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var React = require('react');
+var theme_themes = require('../theme/themes.js');
+var theme_colors = require('../theme/colors.js');
+var theme_type = require('../theme/type.js');
+var hooks_useObserveTheme = require('./useObserveTheme.js');
+require('../theme/corners.js');
+require('../theme/elevations.js');
+
+/**
+ * Hook to manage Slice theming
+ */
+function useTheme() {
+    const current = hooks_useObserveTheme.useObserveTheme();
+    const set = React.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 ? theme_themes.darkTheme : theme_themes.lightTheme;
+            }
+            else {
+                theme = newTheme === theme_themes.darkTheme.name ? theme_themes.darkTheme : theme_themes.lightTheme;
+            }
+        }
+        else
+            theme = newTheme;
+        document.documentElement.dataset.theme = theme.name;
+    }, []);
+    const toggle = () => {
+        const lightMode = current.name === theme_themes.lightTheme.name;
+        const newTheme = lightMode ? theme_themes.darkTheme : theme_themes.lightTheme;
+        document.documentElement.dataset.theme = newTheme.name;
+    };
+    const isDark = React.useMemo(() => {
+        return current.name === theme_themes.darkTheme.name;
+    }, [current]);
+    return {
+        /**
+         * Slice's default dark theme
+         */
+        darkTheme: theme_themes.darkTheme,
+        /**
+         * Slice's default light theme
+         */
+        lightTheme: theme_themes.lightTheme,
+        /**
+         * The currently active SliceTheme
+         */
+        current,
+        /**
+         * CSS variables for theme colors
+         */
+        colors: theme_colors.colorCssVars,
+        /**
+         * CSS Class names for the theme colors
+         */
+        colorsClass: theme_colors.colorClass,
+        /**
+         * CSS class names for theme typefaces
+         */
+        typeClass: theme_type.typeCssClasses,
+        /**
+         * CSS typeface styles as inline style properties
+         */
+        typeStyle: theme_type.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,
+    };
+}
+
+exports.useTheme = useTheme;

package/dist/cjs/hooks/useToolTip.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+
+const hiddenCoords = { x: 0, y: 0 };
+function useToolTip(toolTip, tipElement) {
+    const [coords, setCoords] = React.useState(hiddenCoords);
+    React.useLayoutEffect(() => {
+        var _a;
+        // remove tooltip from view
+        if (!toolTip || !(tipElement === null || tipElement === void 0 ? void 0 : tipElement.current)) {
+            setCoords(hiddenCoords);
+            return;
+        }
+        // get the target ref
+        const target = (_a = toolTip.ref) === null || _a === void 0 ? void 0 : _a.current;
+        if (!target) {
+            setCoords(hiddenCoords);
+            return;
+        }
+        // get rectangles for parent and tooltip
+        const parentRect = target.getBoundingClientRect();
+        const tipRect = tipElement.current.getBoundingClientRect();
+        // get position and size details
+        const { x: parentX, y: parentY, width: parentWidth, height: parentHeight, } = parentRect;
+        const { width: tipWidth } = tipRect;
+        // calculate the tool tip coords suc that it's placed beneath the parent
+        const x = parentX + parentWidth / 2 - tipWidth / 2;
+        const y = parentY + parentHeight + 10;
+        // set the coords
+        setCoords({ x, y });
+    }, [toolTip, tipElement]);
+    return coords;
+}
+
+exports.useToolTip = useToolTip;