@apple-pie/slice 0.1.59 → 0.2.0

package/dist/esm/chunks/FileList-DxB0ZORo.mjs

@@ -0,0 +1,220 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+import React, { useRef, useCallback, useLayoutEffect, useEffect } from "react";
+
+import { s as setStyle } from "./misc-DI5GSqkt.mjs";
+
+import { r as resolveColorProps } from "./resolveColorProps-CwAU25V-.mjs";
+
+import { f as fileItemKey, A as Attachment, a as fileProgress } from "./Attachment-BTSb0hKX.mjs";
+
+import { F as FileIcon } from "./FileIcon-hKJZoGIx.mjs";
+
+import { I as Icon } from "./Icon-43T0fkr6.mjs";
+
+import { P as ProgressIndicator } from "./ProgressIndicator-CR3pA1Me.mjs";
+
+var css = {
+    wrapper: "FileList-module_wrapper__9-rrl",
+    file: "FileList-module_file__61dkh",
+    fileName: "FileList-module_fileName__amame",
+    meta: "FileList-module_meta__unbpG flexBox-module_columnStart__C7P44",
+    status: "FileList-module_status__H1s6f type-module_body-xs-regular__ZAFft",
+    error: "FileList-module_error__UZ4-T",
+    fileIcon: "FileList-module_fileIcon__xDWW8 flexBox-module_row__z24tF",
+    progress: "FileList-module_progress__7l-z1",
+    remove: "FileList-module_remove__JbY1x",
+    xs: "FileList-module_xs__i2S-5 type-module_body-xs-regular__ZAFft",
+    s: "FileList-module_s__4q0ae type-module_body-s-regular__vRHSP",
+    m: "FileList-module_m__hWqBx type-module_body-m-regular__LuQBA",
+    l: "FileList-module_l__tHDNp type-module_body-l-regular__lOYbg",
+    xl: "FileList-module_xl__fxW11 type-module_body-xl-regular__pF2kC",
+    attachment: "FileList-module_attachment__z9l9y"
+};
+
+function FileRow({item: item, canRemove: canRemove, iconSize: iconSize, textSize: textSize, onRemove: onRemove, onToolTip: onToolTip}) {
+    const name = "string" == typeof item.file ? item.file : item.file.name, progress = fileProgress(item), removable = canRemove && !item.uploading, tooltip = useRef({
+        hovered: !1,
+        focused: !1,
+        shown: !1
+    });
+    useEffect(() => (removable || (tooltip.current = {
+        hovered: !1,
+        focused: !1,
+        shown: !1
+    }), () => {
+        tooltip.current.shown && (null == onToolTip || onToolTip(null)), tooltip.current.shown = !1;
+    }), [ onToolTip, removable ]);
+    const updateTip = button => {
+        const state = tooltip.current;
+        state.hovered || state.focused ? !state.shown && onToolTip && (state.shown = !0, 
+        onToolTip({
+            payload: {
+                label: `Remove file ${name}`
+            },
+            ref: {
+                current: button
+            }
+        })) : state.shown && (state.shown = !1, null == onToolTip || onToolTip(null));
+    }, style = {
+        "--file-progress": `${null != progress ? progress : 0}%`,
+        "--file-row-right": removable ? "calc(var(--file-row-horizontal, var(--spacing-xs)) - var(--file-row-adjustment, var(--spacing-xxs)))" : "var(--file-row-horizontal, var(--spacing-xs))",
+        "--file-border-color": item.error ? "var(--feedback-warning)" : "var(--core-outline-primary)"
+    };
+    return jsxs("div", {
+        role: "listitem",
+        className: `${css.file} ${css[textSize]}`,
+        style: style,
+        children: [ jsx("div", {
+            className: css.fileIcon,
+            children: jsx(FileIcon, {
+                filename: item.file,
+                size: iconSize,
+                decorative: !0
+            })
+        }), jsxs("div", {
+            className: css.meta,
+            children: [ jsx("div", {
+                className: css.fileName,
+                title: name,
+                children: name
+            }), item.error && jsxs("div", {
+                className: `${css.status} ${css.error}`,
+                role: "alert",
+                children: [ name, ": ", item.error ]
+            }) ]
+        }), item.uploading && jsx("div", {
+            className: css.progress,
+            role: "progressbar",
+            tabIndex: -1,
+            "aria-label": `Uploading ${name}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progress,
+            children: jsx(ProgressIndicator, {
+                decorative: !0,
+                inline: !0,
+                size: 20,
+                show: !0
+            })
+        }), removable && jsx("button", {
+            type: "button",
+            className: css.remove,
+            "aria-label": `Remove file ${name}`,
+            onMouseEnter: e => {
+                tooltip.current.hovered = !0, updateTip(e.currentTarget);
+            },
+            onMouseLeave: e => {
+                tooltip.current.hovered = !1, updateTip(e.currentTarget);
+            },
+            onFocus: e => {
+                tooltip.current.focused = !0, updateTip(e.currentTarget);
+            },
+            onBlur: e => {
+                tooltip.current.focused = !1, updateTip(e.currentTarget);
+            },
+            onClick: e => {
+                tooltip.current.shown && (null == onToolTip || onToolTip(null)), tooltip.current = {
+                    hovered: !1,
+                    focused: !1,
+                    shown: !1
+                }, onRemove(e.currentTarget);
+            },
+            children: jsx(Icon, {
+                name: "basic.cross",
+                "aria-hidden": "true"
+            })
+        }) ]
+    });
+}
+
+const FileListBase = React.forwardRef((rawProps, ref) => {
+    const _a = resolveColorProps(rawProps), {files: files = [], variant: variant = "list", attachmentSize: attachmentSize, onChange: onChange, onToolTip: onToolTip, listName: listName = "Files", maxWidth: maxWidth, minWidth: minWidth, direction: direction = "row", padding: padding, gap: gap = 10, textSize: textSize = "s", iconSize: iconSize, backgroundColor: backgroundColor, canRemove: canRemove = !0, className: className, style: style} = _a, attributes = __rest(_a, [ "files", "variant", "attachmentSize", "onChange", "onToolTip", "listName", "maxWidth", "minWidth", "direction", "padding", "gap", "textSize", "iconSize", "backgroundColor", "canRemove", "className", "style" ]), root = useRef(null), setRoot = useCallback(node => {
+        if (root.current = node, "function" == typeof ref) return ref(node);
+        ref && (ref.current = node);
+    }, [ ref ]), focusAfterRemoval = useRef(void 0);
+    useLayoutEffect(() => {
+        var _a, _b;
+        const pending = focusAfterRemoval.current;
+        if (!pending || pending.removed.isConnected) return;
+        focusAfterRemoval.current = void 0;
+        const document = pending.removed.ownerDocument;
+        document.activeElement !== document.body && document.activeElement !== pending.removed || ((null === (_a = pending.next) || void 0 === _a ? void 0 : _a.isConnected) ? pending.next.focus() : null === (_b = root.current) || void 0 === _b || _b.focus());
+    });
+    const occurrences = new Map, cssVars = {
+        "--file-max-width": "list" === variant && "column" === direction ? "100%" : setStyle("attachments" === variant ? null != maxWidth ? maxWidth : "100%" : maxWidth),
+        "--file-min-width": "list" === variant && "column" === direction && null == minWidth ? "100%" : setStyle("attachments" === variant ? null != minWidth ? minWidth : 0 : minWidth),
+        "--file-gap": setStyle(gap),
+        "--file-direction": direction,
+        "--file-wrap": "column" === direction ? "nowrap" : "wrap",
+        "--file-padding": setStyle(null != padding ? padding : "calc(var(--spacing-xs) + var(--spacing-xxs))"),
+        "--file-icon-size": setStyle(null != iconSize ? iconSize : 24),
+        "--file-bg-color": null != backgroundColor ? backgroundColor : "var(--core-surface-secondary)"
+    };
+    return jsx("div", Object.assign({}, attributes, {
+        ref: setRoot,
+        role: "list",
+        "aria-label": listName,
+        tabIndex: -1,
+        className: `${css.wrapper} ${null != className ? className : ""}`,
+        style: Object.assign(Object.assign({}, style), cssVars),
+        children: files.map((entry, index) => {
+            var _a, _b;
+            const item = "file" in entry ? entry : {
+                file: entry
+            }, key = fileItemKey(entry), occurrence = null !== (_a = occurrences.get(key)) && void 0 !== _a ? _a : 0;
+            occurrences.set(key, occurrence + 1);
+            const remove = button => {
+                var _a, _b, _c;
+                if (button.ownerDocument.activeElement === button) {
+                    const buttons = Array.from(null !== (_b = null === (_a = root.current) || void 0 === _a ? void 0 : _a.querySelectorAll("button")) && void 0 !== _b ? _b : []), position = buttons.indexOf(button);
+                    focusAfterRemoval.current = {
+                        removed: button,
+                        next: null !== (_c = buttons[position + 1]) && void 0 !== _c ? _c : buttons[position - 1]
+                    };
+                }
+                null == onChange || onChange(files.filter((_, itemIndex) => itemIndex !== index));
+            }, rowKey = `${key}:${occurrence}`;
+            if ("attachments" === variant) {
+                const name = "string" == typeof item.file ? item.file : item.file.name;
+                return jsx("div", {
+                    role: "listitem",
+                    className: css.attachment,
+                    children: jsx(Attachment, {
+                        content: item,
+                        size: attachmentSize,
+                        textSize: textSize,
+                        iconSize: iconSize,
+                        padding: padding,
+                        backgroundColor: backgroundColor,
+                        canRemove: canRemove && (!item.uploading || Boolean(null === (_b = item.error) || void 0 === _b ? void 0 : _b.trim())),
+                        removeLabel: `Remove file ${name}`,
+                        onRemove: event => remove(event.currentTarget),
+                        onToolTip: onToolTip,
+                        style: {
+                            maxWidth: "100%",
+                            minWidth: "var(--file-min-width)"
+                        }
+                    })
+                }, rowKey);
+            }
+            return jsx(FileRow, {
+                item: item,
+                canRemove: canRemove,
+                iconSize: null != iconSize ? iconSize : 24,
+                textSize: textSize,
+                onToolTip: onToolTip,
+                onRemove: remove
+            }, rowKey);
+        })
+    }));
+});
+
+FileListBase.displayName = "FileList";
+
+const FileList = React.memo(FileListBase);
+
+export { FileList as F };

package/dist/esm/chunks/FlexBox-VfQehVtm.mjs

@@ -0,0 +1,296 @@
+'use client';
+import { a as __rest } from "./tslib.es6-CpnJrDBv.mjs";
+
+import { jsx } from "react/jsx-runtime";
+
+import { motion } from "motion/react";
+
+import React, { useMemo, useCallback } from "react";
+
+import { useTheme } from "../hooks/useTheme.mjs";
+
+import { e as setSizeStyle, s as setStyle } 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";
+
+/** Override per-target timing too: it takes precedence over the element transition. */ function reduceMotionTarget(target) {
+    return !target || "object" != typeof target || Array.isArray(target) ? target : Object.assign(Object.assign({}, target), {
+        transition: {
+            type: "tween",
+            duration: 0,
+            delay: 0,
+            repeat: 0
+        }
+    });
+}
+
+var Size, Preset, css_flexDiv = "FlexBox-module_flexDiv__VyOzx type-module_body-m-regular__LuQBA scrollBars-module_scrollbars__c-ZPl";
+
+!function(Size) {
+    Size.Grow = "grow", Size.Fill = "fill", Size.Fit = "fit", Size.Viewport = "viewport", 
+    Size.Auto = "auto";
+}(Size || (Size = {})), function(Preset) {
+    Preset.Default = "default", Preset.FillStart = "fill-start", Preset.FillCenter = "fill-center", 
+    Preset.FillCenterMiddle = "fill-center-middle", Preset.FillEnd = "fill-end", Preset.FillWrap = "fill-wrap", 
+    Preset.FillScroll = "fill-scroll", Preset.Window = "window", Preset.Row = "row", 
+    Preset.RowBetween = "row-between", Preset.Column = "column", Preset.ColumnBetween = "column-between", 
+    Preset.Draggable = "draggable";
+}(Preset || (Preset = {}));
+
+const layoutSets = {
+    [Preset.Default]: {
+        width: "fill",
+        height: "fit",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.FillScroll]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: !0,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.FillStart]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.FillWrap]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "start",
+        align: "start",
+        alignContent: "flex-start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "row",
+        wrap: !0,
+        shrinkChildren: !1
+    },
+    [Preset.FillCenter]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "start",
+        align: "center",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.FillCenterMiddle]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "center",
+        align: "center",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.FillEnd]: {
+        width: "fill",
+        flex: 1,
+        height: "fill",
+        justify: "start",
+        align: "end",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.Window]: {
+        width: "viewport",
+        height: "viewport",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "row",
+        shrinkChildren: !1
+    },
+    [Preset.Row]: {
+        width: "fit",
+        height: "fit",
+        justify: "start",
+        align: "center",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "row",
+        shrinkChildren: !1
+    },
+    [Preset.RowBetween]: {
+        width: "fill",
+        height: "fit",
+        justify: "between",
+        align: "center",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "row",
+        shrinkChildren: !1
+    },
+    [Preset.Column]: {
+        width: "fit",
+        height: "fit",
+        justify: "start",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.ColumnBetween]: {
+        width: "fit",
+        height: "fill",
+        justify: "between",
+        align: "start",
+        scrollY: !1,
+        scrollX: !1,
+        overflow: "hidden",
+        direction: "column",
+        shrinkChildren: !1
+    },
+    [Preset.Draggable]: {
+        width: "fit",
+        height: "fill",
+        justify: "start",
+        align: "start",
+        scrollY: void 0,
+        scrollX: void 0,
+        overflow: "visible",
+        direction: "column",
+        shrinkChildren: !1
+    }
+};
+
+function setSize(style, isHeight) {
+    return "number" == typeof style ? `${style}px` : "grow" === style ? "unset" : "fill" === style ? "100%" : "fit" === style ? "auto" : "viewport" === style ? isHeight ? "100vh" : "100vw" : style;
+}
+
+function setPaddingRight(padding, scrollBox) {
+    if (void 0 === padding) return scrollBox ? "var(--spacing-xs)" : "unset";
+}
+
+function setFlex(style) {
+    return "start" === style || "top" === style ? "flex-start" : "end" === style || "bottom" === style ? "flex-end" : "between" === style ? "space-between" : style;
+}
+
+const FlexBox = React.memo(React.forwardRef((rawProps, ref) => {
+    const props = resolveColorProps(rawProps), {current: current} = useTheme(), reducedMotion = usePrefersReducedMotion(), {children: children, preset: preset = "default", scrollY: scrollY, scrollX: scrollX, scrollBox: scrollBox = !1, overflow: overflow, background: background = "transparent", direction: direction, align: align, justify: justify, height: height, width: width, maxWidth: maxWidth, centerSelf: centerSelf, wrap: wrap, reverse: reverse = !1, padding: padding, margin: margin = 0, absolute: absolute = !1, flex: flex, gap: gap, variants: variants, transition: transition, animate: animate, initial: initial, layout: layout, layoutId: layoutId, whileHover: whileHover, whileTap: whileTap, whileFocus: whileFocus, whileDrag: whileDrag, whileInView: whileInView, exit: exit, border: border, borderRadius: borderRadius, className: className, scrollHandle: scrollHandle, scrollHandleHover: scrollHandleHover, shrinkChildren: shrinkChildren, growChildren: growChildren} = props, divAttributes = __rest(props, [ "children", "preset", "scrollY", "scrollX", "scrollBox", "overflow", "background", "direction", "align", "justify", "height", "width", "maxWidth", "centerSelf", "wrap", "reverse", "padding", "margin", "absolute", "flex", "gap", "variants", "transition", "animate", "initial", "layout", "layoutId", "whileHover", "whileTap", "whileFocus", "whileDrag", "whileInView", "exit", "border", "borderRadius", "className", "scrollHandle", "scrollHandleHover", "shrinkChildren", "growChildren" ]), {id: divId, style: userStyle} = divAttributes, rest = __rest(divAttributes, [ "id", "style" ]), wrapperStyle = null != userStyle ? userStyle : {}, presets = useMemo(() => ({
+        width: null != width ? width : layoutSets[preset].width,
+        height: null != height ? height : layoutSets[preset].height,
+        direction: null != direction ? direction : layoutSets[preset].direction,
+        align: null != align ? align : layoutSets[preset].align,
+        flex: null != flex ? flex : layoutSets[preset].flex,
+        justify: null != justify ? justify : layoutSets[preset].justify,
+        scrollY: null != scrollY ? scrollY : layoutSets[preset].scrollY,
+        scrollX: null != scrollX ? scrollX : layoutSets[preset].scrollX,
+        shrinkChildren: null != shrinkChildren ? shrinkChildren : layoutSets[preset].shrinkChildren,
+        overflow: null != overflow ? overflow : layoutSets[preset].overflow,
+        wrap: null != wrap ? wrap : layoutSets[preset].wrap,
+        alignContent: layoutSets[preset].alignContent
+    }), [ preset, width, height, direction, align, justify, scrollY, scrollX, shrinkChildren, flex, overflow, wrap ]), setScroll = useCallback(value => {
+        if (void 0 !== value) return value ? "auto" : "hidden";
+    }, []), style = useMemo(() => Object.assign(Object.assign({
+        display: "flex",
+        position: "" + (absolute ? "absolute" : "relative"),
+        flexDirection: `${presets.direction}${reverse ? "-reverse" : ""}`,
+        flexWrap: "" + (presets.wrap ? "wrap" : "nowrap"),
+        justifyContent: `${setFlex(presets.justify)}`,
+        alignItems: `${setFlex(presets.align)}`,
+        alignContent: presets.alignContent,
+        boxSizing: "border-box",
+        padding: `${setSizeStyle(null != padding ? padding : 0)}`
+    }, void 0 === padding ? {
+        paddingRight: setPaddingRight(padding, scrollBox)
+    } : {}), {
+        margin: centerSelf ? "0 auto" : `${setSizeStyle(margin)}`,
+        width: `${absolute ? "unset" : setSize(presets.width, !1)}`,
+        height: `${absolute ? "unset" : setSize(presets.height, !0)}`,
+        maxWidth: `${void 0 !== maxWidth ? setSize(maxWidth, !1) : "unset"}`,
+        flex: absolute ? void 0 : presets.flex,
+        top: "" + (absolute ? "0" : "unset"),
+        bottom: "" + (absolute ? "0" : "unset"),
+        left: "" + (absolute ? "0" : "unset"),
+        right: "" + (absolute ? "0" : "unset"),
+        gap: void 0 !== gap ? `${gap}px` : "unset",
+        border: `${null != border ? border : "unset"}`,
+        background: `${null != background ? background : "transparent"}`,
+        overflow: presets.overflow,
+        overflowY: setScroll(null != scrollY ? scrollY : void 0 === overflow ? presets.scrollY : void 0),
+        overflowX: setScroll(null != scrollX ? scrollX : void 0 === overflow ? presets.scrollX : void 0),
+        borderRadius: setStyle(borderRadius),
+        color: "var(--core-text-primary)",
+        "--flex-div-scroll-border": `${null != background ? background : "transparent"}`,
+        "--flex-div-scroll-handle": `${null != scrollHandle ? scrollHandle : "var(--scroll-bar)"}`,
+        "--flex-div-scroll-handle-hover": `${null != scrollHandleHover ? scrollHandleHover : "var(--scroll-bar-hover)"}`
+    }), [ absolute, reverse, padding, margin, gap, border, background, centerSelf, maxWidth, scrollHandle, scrollHandleHover, borderRadius, setScroll, presets, scrollBox, scrollY, scrollX, overflow ]), motionVariants = useMemo(() => reducedMotion ? function(variants) {
+        return variants ? Object.fromEntries(Object.entries(variants).map(([name, target]) => "function" == typeof target ? [ name, (...args) => reduceMotionTarget(target(...args)) ] : [ name, reduceMotionTarget(target) ])) : variants;
+    }(variants) : variants, [ reducedMotion, variants ]), motionTarget = useMemo(() => reducedMotion ? reduceMotionTarget(animate) : animate, [ reducedMotion, animate ]);
+    return jsx(motion.div, Object.assign({
+        id: divId,
+        ref: ref,
+        className: `${css_flexDiv} ${null != className ? className : ""}`,
+        style: (() => {
+            if (void 0 === wrapperStyle.overflow) return Object.assign(Object.assign({}, style), wrapperStyle);
+            const {overflowX: _overflowX, overflowY: _overflowY} = style, layoutStyle = __rest(style, [ "overflowX", "overflowY" ]);
+            return Object.assign(Object.assign({}, layoutStyle), wrapperStyle);
+        })(),
+        transition: reducedMotion ? {
+            duration: 0,
+            delay: 0,
+            repeat: 0
+        } : getWaterTransition(current.motion, transition),
+        variants: motionVariants,
+        initial: !reducedMotion && initial,
+        animate: motionTarget,
+        exit: reducedMotion ? void 0 : exit,
+        layout: !reducedMotion && layout,
+        layoutId: reducedMotion ? void 0 : layoutId,
+        whileHover: reducedMotion ? void 0 : whileHover,
+        whileTap: reducedMotion ? void 0 : whileTap,
+        whileFocus: reducedMotion ? void 0 : whileFocus,
+        whileDrag: reducedMotion ? void 0 : whileDrag,
+        whileInView: reducedMotion ? void 0 : whileInView,
+        "data-shrink-children": presets.shrinkChildren,
+        "data-grow-children": growChildren
+    }, rest, {
+        children: children
+    }));
+}));
+
+FlexBox.displayName = "FlexBox";
+
+export { FlexBox as F, Preset as P, Size as S };

package/dist/esm/chunks/FlexDiv-BZ5PBnE3.mjs

@@ -0,0 +1,6 @@
+'use client';
+import { F as FlexBox } from "./FlexBox-VfQehVtm.mjs";
+
+/** @deprecated Use FlexBox instead. This is the same component and supports the same props and ref. */ const FlexDiv = FlexBox;
+
+export { FlexDiv as F };