@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/IconButton-oqYTUJit.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+
+import React from "react";
+
+import { A as ActionButton } from "./ActionButton-guWI4qko.mjs";
+
+const IconButton = React.memo(function(props) {
+    return jsx(ActionButton, Object.assign({}, props));
+});
+
+export { IconButton as I };

package/dist/esm/chunks/{IndexedDB-CB92RX6-.mjs → IndexedDB-DjCLZUf0.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-DatKI43-.mjs";
+import { _ as __awaiter } from "./tslib.es6-CpnJrDBv.mjs";
 
 class IndexedDB {
     constructor(storeName, options = {}) {

package/dist/esm/chunks/ModalController-fvF-RWS8.mjs

@@ -0,0 +1,169 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, usePresence, useAnimationControls, useDragControls, motion } from "motion/react";
+
+import { useMemo, useRef, useEffect, useCallback } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { u as useModal, a as useModalActions, g as getModal } from "./modalStore-BgYt3q8T.mjs";
+
+import { m as mergedPresenceMotionValues } from "./misc-DI5GSqkt.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+import { O as Overlay } from "./Overlay-C_FMcUyg.mjs";
+
+import { M as ModalHostContext } from "./ModalHostContext-BrT_g7sc.mjs";
+
+import { u as useModalHost } from "./useModalHost-DiYFB7Mq.mjs";
+
+var css_host = "ModalController-module_host__lt5Xy", css_container = "ModalController-module_container__3cSaO", css_box = "ModalController-module_box__cPzOz", css_wrapper = "ModalController-module_wrapper__HkOoX flexBox-module_row__z24tF";
+
+const defaultVariants = {
+    initial: {
+        opacity: 0,
+        y: 20
+    },
+    animate: {
+        opacity: 1,
+        y: 0
+    },
+    exit: {
+        opacity: 0,
+        y: 20
+    }
+}, reducedTarget = {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    z: 0,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    rotate: 0,
+    rotateX: 0,
+    rotateY: 0,
+    skewX: 0,
+    skewY: 0
+}, instanceKeys = new WeakMap;
+
+let sequence = 0;
+
+function instanceKey(modal) {
+    let key = instanceKeys.get(modal);
+    return void 0 === key && (key = ++sequence, instanceKeys.set(modal, key)), key;
+}
+
+/** Bind settlement to the stored instance, including callbacks retained by asynchronous content. */ function useModalCallbacks(modal) {
+    const {hide: hide, resolve: resolve, reject: reject} = useModalActions();
+    return {
+        dismiss: useCallback(() => {
+            var _a;
+            modal && getModal() === modal && (hide(), "function" == typeof (null === (_a = modal.props) || void 0 === _a ? void 0 : _a.onClose) && modal.props.onClose());
+        }, [ modal, hide ]),
+        onResolve: useCallback(value => {
+            var _a;
+            modal && getModal() === modal && (resolve(value), "function" == typeof (null === (_a = modal.props) || void 0 === _a ? void 0 : _a.onResolve) && modal.props.onResolve(value));
+        }, [ modal, resolve ]),
+        onReject: useCallback(error => {
+            var _a;
+            modal && getModal() === modal && (reject(error), "function" == typeof (null === (_a = modal.props) || void 0 === _a ? void 0 : _a.onReject) && modal.props.onReject(error));
+        }, [ modal, reject ])
+    };
+}
+
+function ModalPresentation(_a) {
+    var {modal: modal, opener: opener} = _a, props = __rest(_a, [ "modal", "opener" ]);
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition, motionValues: motionValues, draggable: draggable = !0} = props, variants = useMemo(() => mergedPresenceMotionValues(defaultVariants, motionValues), [ motionValues ]), [present, safeToRemove] = usePresence(), reduced = usePrefersReducedMotion(), {current: current} = useTheme(), timing = useMemo(() => getWaterTransition(current.motion, transition), [ current.motion, transition ]), controls = useAnimationControls(), dragControls = useDragControls(), host = useRef(null), constraints = useRef(null), {dismiss: dismiss, onResolve: onResolve, onReject: onReject} = useModalCallbacks(modal);
+    useModalHost(host, dismiss, opener, present), useEffect(() => {
+        var _a;
+        if (controls.stop(), reduced) return controls.set(reducedTarget), void (present || null == safeToRemove || safeToRemove());
+        let active = !0;
+        const state = present ? "animate" : "exit", target = variants[state], definition = "function" == typeof target ? state : Object.assign(Object.assign({}, target), {
+            transition: null !== (_a = null == target ? void 0 : target.transition) && void 0 !== _a ? _a : timing
+        });
+        return controls.start(definition).then(() => {
+            active && !present && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, controls.stop();
+        };
+    }, [ reduced, present, controls, safeToRemove, variants, timing ]);
+    const Component = modal.component;
+    return jsx(ModalHostContext.Provider, {
+        value: !0,
+        children: jsx("div", {
+            ref: host,
+            className: css_host,
+            tabIndex: -1,
+            inert: !present,
+            "aria-hidden": !present || void 0,
+            children: jsx("div", {
+                className: css_container,
+                ref: constraints,
+                children: jsx("div", {
+                    className: css_box,
+                    children: jsx(motion.div, {
+                        className: css_wrapper,
+                        variants: reduced ? void 0 : variants,
+                        initial: !reduced && "initial",
+                        animate: controls,
+                        transition: reduced ? {
+                            duration: 0,
+                            delay: 0
+                        } : timing,
+                        drag: present && draggable,
+                        dragListener: !draggable && void 0,
+                        dragControls: draggable ? dragControls : void 0,
+                        dragConstraints: draggable ? null != dragConstraintsRef ? dragConstraintsRef : constraints : void 0,
+                        dragElastic: draggable ? 0 : void 0,
+                        dragMomentum: !draggable && void 0,
+                        children: jsx(Component, Object.assign({}, modal.props, {
+                            onResolve: onResolve,
+                            onReject: onReject,
+                            onClose: dismiss,
+                            onDragPointerDown: event => {
+                                var _a;
+                                present && getModal() === modal && ("function" == typeof (null === (_a = modal.props) || void 0 === _a ? void 0 : _a.onDragPointerDown) && modal.props.onDragPointerDown(event), 
+                                draggable && !event.defaultPrevented && dragControls.start(event));
+                            }
+                        }))
+                    })
+                })
+            })
+        })
+    });
+}
+
+function ModalController(rawProps) {
+    const props = resolveColorProps(rawProps), {overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", transition: transition} = props, {current: current} = useTheme(), timing = useMemo(() => getWaterTransition(current.motion, transition), [ current.motion, transition ]), modal = useModal(), {dismiss: dismiss} = useModalCallbacks(modal), opener = useRef(null);
+    return useEffect(() => {
+        if (modal) return;
+        const remember = event => {
+            event.target instanceof Element && (opener.current = event.target.closest("button, a[href], input, select, textarea, [tabindex]"));
+        };
+        return document.addEventListener("pointerdown", remember, !0), () => document.removeEventListener("pointerdown", remember, !0);
+    }, [ modal ]), jsxs(Fragment, {
+        children: [ jsx(Overlay, {
+            show: !!modal,
+            opacity: overlayOpacity,
+            backgroundColor: overlayColor,
+            transition: timing,
+            onClick: dismiss
+        }), jsx(AnimatePresence, {
+            children: (null == modal ? void 0 : modal.component) && jsx(ModalPresentation, Object.assign({}, props, {
+                modal: modal,
+                opener: opener
+            }), instanceKey(modal))
+        }) ]
+    });
+}
+
+export { ModalController as M };

package/dist/esm/chunks/ModalHostContext-BrT_g7sc.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ModalHostContext = createContext(!1);
+
+export { ModalHostContext as M };

package/dist/esm/chunks/Overlay-C_FMcUyg.mjs

@@ -0,0 +1,93 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import { AnimatePresence, usePresence, useAnimationControls, motion } from "motion/react";
+
+import React, { useMemo, useEffect } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var css_overlay = "Overlay-module_overlay__EkbfA", css_backdrop = "Overlay-module_backdrop__HLwOh";
+
+function OverlayLayer(_a) {
+    var {children: children, opacity: opacity, backgroundColor: backgroundColor, transition: transition, motionValues: motionValues, className: className, style: style, position: position = "fixed", pointerEvents: pointerEvents = "auto"} = _a, attributes = __rest(_a, [ "children", "opacity", "backgroundColor", "transition", "motionValues", "className", "style", "position", "pointerEvents" ]);
+    const [isPresent, safeToRemove] = usePresence(), reducedMotion = usePrefersReducedMotion(), controls = useAnimationControls(), variants = useMemo(() => {
+        const defaults = {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: opacity
+            },
+            exit: {
+                opacity: 0
+            }
+        }, merged = Object.assign(Object.assign({}, defaults), motionValues);
+        for (const state of [ "initial", "animate", "exit" ]) {
+            const override = null == motionValues ? void 0 : motionValues[state];
+            override && "function" != typeof override && (merged[state] = Object.assign(Object.assign({}, defaults[state]), override));
+        }
+        return merged;
+    }, [ opacity, motionValues ]);
+    if (useEffect(() => {
+        if (reducedMotion) return void (isPresent || null == safeToRemove || safeToRemove());
+        let active = !0;
+        const state = isPresent ? "animate" : "exit", target = variants[state], definition = "function" == typeof target ? state : target;
+        return controls.start(definition, transition).then(() => {
+            active && !isPresent && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, controls.stop();
+        };
+    }, [ controls, isPresent, reducedMotion, safeToRemove, transition, variants ]), 
+    reducedMotion && !isPresent) return null;
+    const rootStyle = Object.assign(Object.assign({}, style), {
+        "--overlay-background": backgroundColor,
+        position: position,
+        pointerEvents: pointerEvents
+    });
+    return jsxs("div", Object.assign({}, (attributes => Object.fromEntries(Object.entries(attributes).filter(([key]) => !key.startsWith("aria-") && "role" !== key)))(attributes), {
+        "data-overlay": "",
+        "data-pointer-events": pointerEvents,
+        className: `${css_overlay}${className ? ` ${className}` : ""}`,
+        style: rootStyle,
+        children: [ reducedMotion ? jsx("div", {
+            "data-overlay-backdrop": "",
+            "aria-hidden": "true",
+            className: css_backdrop,
+            style: {
+                opacity: opacity
+            }
+        }) : jsx(motion.div, {
+            "data-overlay-backdrop": "",
+            "aria-hidden": "true",
+            className: css_backdrop,
+            initial: "initial",
+            animate: controls,
+            variants: variants,
+            transition: transition
+        }), children ]
+    }));
+}
+
+const Overlay = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), {show: show = !1, backgroundColor: backgroundColor = "rgb(0,0,0)", opacity: opacity = 0, transition: transition} = props, attributes = __rest(props, [ "show", "backgroundColor", "opacity", "transition" ]), {current: current} = useTheme(), timing = useMemo(() => getWaterTransition(current.motion, transition), [ current.motion, transition ]), effectiveOpacity = Number.isFinite(opacity) ? Math.min(1, Math.max(0, opacity)) : 0;
+    return jsx(AnimatePresence, {
+        children: show && jsx(OverlayLayer, Object.assign({}, attributes, {
+            backgroundColor: backgroundColor,
+            opacity: effectiveOpacity,
+            transition: timing
+        }), "overlay")
+    });
+});
+
+Overlay.displayName = "Overlay";
+
+export { Overlay as O };

package/dist/esm/chunks/Pager-LqYNCZ8I.mjs

@@ -0,0 +1,158 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { AnimatePresence, usePresence, usePresenceData, useAnimationControls, useMotionValue, motion } from "motion/react";
+
+import React, { useMemo, useState, useEffect } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { g as getWaterTransition } from "./getWaterTransition-CrDSFJdk.mjs";
+
+import { u as usePrefersReducedMotion } from "./usePrefersReducedMotion-BWAwMMLE.mjs";
+
+var css_wrapper = "Pager-module_wrapper__eutVg", css_viewport = "Pager-module_viewport__3CQq8", css_bullet = "Pager-module_bullet__TxyR5", css_dot = "Pager-module_dot__7db0M";
+
+/** Invalid counts produce an empty pager; fractional counts use whole pages. */ function getDotScale(index, selectedIndex, scale, factor, minimum) {
+    return Math.max(minimum, scale * Math.pow(factor, Math.abs(index - selectedIndex)));
+}
+
+/** Opacity keeps fading independently of the minimum visual dot size. */
+function getDotOpacity(index, selectedIndex, factor) {
+    return Math.pow(factor, Math.abs(index - selectedIndex));
+}
+
+function PageButton({index: index, pages: pages, selected: selected, scale: scale, opacity: opacity, color: color, colorHover: colorHover, colorOn: colorOn, window: window, onSelect: onSelect}) {
+    const [present, safeToRemove] = usePresence(), presenceWindow = usePresenceData(), liveWindow = present ? window : null != presenceWindow ? presenceWindow : window, reduced = usePrefersReducedMotion(), controls = useAnimationControls(), dotControls = useAnimationControls(), [hovered, setHovered] = useState(!1), dotColor = selected ? colorOn : hovered ? colorHover : color, dotScale = useMotionValue(scale), dotOpacity = useMotionValue(opacity), dotBackground = useMotionValue(dotColor);
+    useEffect(() => (reduced ? dotControls.set({
+        scale: scale,
+        opacity: opacity,
+        backgroundColor: dotColor
+    }) : dotControls.start({
+        scale: scale,
+        opacity: opacity,
+        backgroundColor: dotColor,
+        transition: liveWindow.transition
+    }), () => dotControls.stop()), [ dotControls, scale, opacity, dotColor, reduced, liveWindow.transition ]);
+    const position = useMotionValue((index - window.previousStart) * window.stride), x = (index - liveWindow.start) * liveWindow.stride;
+    return useEffect(() => {
+        if (reduced) return controls.set({
+            x: x
+        }), void (present || null == safeToRemove || safeToRemove());
+        let active = !0;
+        return controls.start({
+            x: x,
+            transition: liveWindow.transition
+        }).then(() => {
+            active && !present && (null == safeToRemove || safeToRemove());
+        }), () => {
+            active = !1, controls.stop();
+        };
+    }, [ controls, x, reduced, present, safeToRemove, liveWindow.transition ]), jsx(motion.button, {
+        type: "button",
+        className: css_bullet,
+        style: {
+            x: position
+        },
+        initial: {
+            x: (index - window.previousStart) * window.stride
+        },
+        animate: controls,
+        "aria-label": `Page ${index + 1} of ${pages}`,
+        "aria-current": present && selected ? "page" : void 0,
+        "aria-hidden": !present || void 0,
+        inert: !present || void 0,
+        disabled: !present,
+        onPointerEnter: () => setHovered(!0),
+        onPointerLeave: () => setHovered(!1),
+        onClick: () => onSelect(index),
+        children: jsx(motion.span, {
+            className: css_dot,
+            initial: !1,
+            animate: dotControls,
+            style: {
+                scale: dotScale,
+                opacity: dotOpacity,
+                backgroundColor: dotBackground
+            }
+        })
+    });
+}
+
+const Pager = React.memo(rawProps => {
+    const props = resolveColorProps(rawProps), {size: size = 10, selectedIndex: selectedIndex, defaultSelectedIndex: defaultSelectedIndex = 0, color: color = "var(--core-text-disabled)", colorHover: colorHover = "var(--core-text-disabled)", colorOn: colorOn = "var(--core-text-primary)", pages: pages = 2, gap: gap = 8, scale: scale = 1, scaleFactor: scaleFactor = .8, minScale: minScale = .5, opacityScales: opacityScales = !1, maxVisiblePages: maxVisiblePages, showMoreOn: showMoreOn, transition: transitionOverrides, onChange: onChange, className: className, style: style} = props, divAttributes = __rest(props, [ "size", "selectedIndex", "defaultSelectedIndex", "color", "colorHover", "colorOn", "pages", "gap", "scale", "scaleFactor", "minScale", "opacityScales", "maxVisiblePages", "showMoreOn", "transition", "onChange", "className", "style" ]), themeMotion = useTheme().current.motion, transition = useMemo(() => getWaterTransition(themeMotion, transitionOverrides), [ themeMotion, transitionOverrides ]), [localIndex, setLocalIndex] = useState(defaultSelectedIndex), pageCount = function(pages) {
+        return Number.isFinite(pages) ? Math.max(0, Math.floor(pages)) : 0;
+    }(pages), activeIndex = function(index, pages) {
+        return pages > 0 && Number.isFinite(index) ? Math.min(pages - 1, Math.max(0, Math.floor(index))) : 0;
+    }(null != selectedIndex ? selectedIndex : localIndex, pageCount), visibleCount = pageCount < 5 ? pageCount : function(pages, maximum) {
+        return void 0 !== maximum && Number.isFinite(maximum) && maximum > 0 ? Math.min(pages, Math.max(1, Math.floor(maximum))) : pages;
+    }
+    /** Center selection after a trigger; endpoints limit how many pages can be revealed. */ (pageCount, maxVisiblePages), [windowState, setWindowState] = useState(() => ({
+        start: Math.max(0, Math.min(pageCount - visibleCount, activeIndex - Math.floor(visibleCount / 2))),
+        selected: activeIndex
+    })), windowStart = function(previousStart, previousIndex, index, pages, visible, showMoreOn) {
+        const lastStart = Math.max(0, pages - visible);
+        let start = Math.min(lastStart, Math.max(0, previousStart));
+        if (0 === visible || visible >= pages || pages < 5) return 0;
+        const defaultTrigger = Math.max(1, visible - 1), trigger = void 0 !== showMoreOn && Number.isInteger(showMoreOn) && showMoreOn >= 1 && showMoreOn < visible ? showMoreOn : defaultTrigger;
+        return (index > previousIndex && index >= start + trigger - 1 || index < previousIndex && index <= start + visible - trigger || index < start || index >= start + visible) && (start = index - Math.floor(visible / 2)), 
+        Math.min(lastStart, Math.max(0, start));
+    }(windowState.start, windowState.selected, activeIndex, pageCount, visibleCount, showMoreOn);
+    useEffect(() => {
+        setWindowState(previous => previous.start === windowStart && previous.selected === activeIndex ? previous : {
+            start: windowStart,
+            selected: activeIndex
+        });
+    }, [ windowStart, activeIndex ]);
+    const dotSize = Number.isFinite(size) && size > 0 ? size : 10, selectedScale = Number.isFinite(scale) && scale > 0 ? scale : 1, distanceFactor = Number.isFinite(scaleFactor) ? Math.min(1, Math.max(0, scaleFactor)) : .8, minimumScale = Number.isFinite(minScale) && minScale > 0 ? Math.min(selectedScale, minScale) : Math.min(selectedScale, .5), spacing = Number.isFinite(gap) ? Math.max(0, gap) : 8, slotSize = dotSize * selectedScale, window = {
+        start: windowStart,
+        previousStart: windowState.start,
+        stride: slotSize + spacing,
+        transition: transition
+    }, cssVars = {
+        "--pager-gap": `${spacing}px`,
+        "--pager-size": `${dotSize}px`,
+        "--pager-slot-size": `${slotSize}px`,
+        "--pager-window-width": `${Math.max(0, visibleCount * slotSize + (visibleCount - 1) * spacing)}px`,
+        "--pager-window-height": `${pageCount > 0 ? slotSize : 0}px`,
+        "--pager-color": color,
+        "--pager-colorOn": colorOn,
+        "--pager-colorHover": colorHover
+    };
+    return jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "Pages"
+    }, divAttributes, {
+        style: Object.assign(Object.assign({}, style), cssVars),
+        className: `${css_wrapper}${className ? ` ${className}` : ""}`,
+        children: jsx("div", {
+            className: css_viewport,
+            children: jsx(AnimatePresence, {
+                initial: !1,
+                custom: window,
+                children: Array.from({
+                    length: visibleCount
+                }, (_, offset) => windowStart + offset).map(pageIndex => jsx(PageButton, {
+                    index: pageIndex,
+                    pages: pageCount,
+                    selected: activeIndex === pageIndex,
+                    scale: getDotScale(pageIndex, activeIndex, selectedScale, distanceFactor, minimumScale),
+                    opacity: opacityScales ? getDotOpacity(pageIndex, activeIndex, distanceFactor) : 1,
+                    color: color,
+                    colorHover: colorHover,
+                    colorOn: colorOn,
+                    window: window,
+                    onSelect: index => {
+                        activeIndex !== index && (void 0 === selectedIndex && setLocalIndex(index), null == onChange || onChange(index));
+                    }
+                }, `page-${pageIndex}`))
+            })
+        })
+    }));
+});
+
+export { Pager as P };