@apple-pie/slice 0.0.1 → 0.0.3

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,45 @@
+/******************************************************************************
+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-BRZK2Drn.js

@@ -0,0 +1,119 @@
+/**
+ * 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/hooks/useDoubleClick.js

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,40 @@
+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.key.toLowerCase() === e.key.toLowerCase() && isMeta) {
+                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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,35 @@
+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 useObserveTheme() {
+    const [theme, setTheme] = useState(lightTheme);
+    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(lightTheme.name))
+                        setTheme(lightTheme);
+                    else {
+                        setTheme(darkTheme);
+                    }
+                }
+            }
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return theme;
+}
+
+export { useObserveTheme };

package/dist/esm/hooks/useTheme.js

@@ -0,0 +1,84 @@
+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 };

package/dist/esm/hooks/useToolTip.js

@@ -0,0 +1,34 @@
+import { useState, useLayoutEffect } from 'react';
+
+const hiddenCoords = { x: 0, y: 0 };
+function useToolTip(toolTip, tipElement) {
+    const [coords, setCoords] = useState(hiddenCoords);
+    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;
+}
+
+export { useToolTip };

package/dist/esm/hooks/useTrackRenders.js

@@ -0,0 +1,36 @@
+import { useRef, useEffect } from 'react';
+import { d as debug } from '../chunks/utils-BRZK2Drn.js';
+
+/**
+ * Hook to log component renders, mounts, and unmounts
+ * Note: wrap in comments with START.DEBUG ... {hook} ... END.DEBUG to remove from build
+ */
+function useTrackRenders(props, componentName = 'Component') {
+    const prev = useRef({
+        props,
+        mount: true,
+        unmount: false,
+    });
+    // 5 random letters (uppercase)
+    const id = crypto
+        .getRandomValues(new Uint8Array(5))
+        .reduce((acc, val) => acc + String.fromCodePoint(65 + (val % 26)), '');
+    // name the component
+    const name = `${componentName} {${id}}`;
+    // Track re-renders w/o dependency array
+    useEffect(() => {
+        prev.current = debug(prev, props, name);
+    });
+    // Track unmount with empty array on return
+    // biome-ignore lint/correctness/useExhaustiveDependencies: track unmount only
+    useEffect(() => {
+        return () => {
+            if (prev.current) {
+                prev.current.unmount = true;
+                debug(prev, prev, name);
+            }
+        };
+    }, []);
+}
+
+export { useTrackRenders };