@rolder/kit 3.0.0-alpha-10 → 3.0.0-alpha-12

package/dist/ui/hoverPaper/HoverPaper.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+import { forwardRef } from "react";
+import styles_module from "./styles.module.js";
+const HoverPaper = /*#__PURE__*/ forwardRef(({ disabled, classNames, ...props }, ref)=>/*#__PURE__*/ jsx(Paper, {
+        ref: ref,
+        classNames: {
+            root: styles_module.root,
+            ...classNames
+        },
+        mod: {
+            disabled
+        },
+        ...props
+    }));
+export { HoverPaper };

package/dist/ui/hoverPaper/index.js

@@ -0,0 +1,2 @@
+export * from "./HoverPaper.js";
+export * from "./usePaperHover.js";

package/dist/ui/hoverPaper/styles.module.js

@@ -0,0 +1,5 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-aYPBH7"
+};
+export { styles_module as default };

package/dist/ui/hoverPaper/styles_module.css

@@ -0,0 +1,15 @@
+.root-aYPBH7 {
+  transition: background-color .2s ease-in-out;
+
+  &:hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    cursor: pointer;
+    transition: background-color .2s ease-in-out;
+  }
+
+  &[data-disabled] {
+    background-color: unset;
+    cursor: default;
+  }
+}
+

package/dist/ui/hoverPaper/usePaperHover.js

@@ -0,0 +1,9 @@
+import { useHover } from "@mantine/hooks";
+const usePaperHover = ()=>{
+    const { hovered: paperHovered, ref: paperRef } = useHover();
+    return {
+        paperHovered,
+        paperRef
+    };
+};
+export { usePaperHover };

package/dist/ui/index.js

@@ -0,0 +1,9 @@
+export * from "./AnimatedChevron.js";
+export * from "./editor/index.js";
+export * from "./error/index.js";
+export * from "./form/index.js";
+export * from "./hoverPaper/index.js";
+export * from "./JsonInput.js";
+export * from "./routerLink/index.js";
+export * from "./saveInput/index.js";
+export * from "./scrollArea/index.js";

package/dist/ui/routerLink/RouterLink.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, Anchor, Button, UnstyledButton } from "@mantine/core";
+import { createLink } from "@tanstack/react-router";
+import { forwardRef } from "react";
+import styles_module from "./styles.module.js";
+const MantineLinkComponent = /*#__PURE__*/ forwardRef(({ classNames, ...props }, ref)=>/*#__PURE__*/ jsx(Anchor, {
+        ref: ref,
+        classNames: {
+            root: styles_module.root,
+            ...classNames
+        },
+        c: "inherit",
+        underline: "never",
+        ...props
+    }));
+const MantineButtonComponent = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        ...props
+    }));
+const MantineActionIconComponent = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(ActionIcon, {
+        ref: ref,
+        ...props
+    }));
+const MantineUnstyledButtonComponent = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(UnstyledButton, {
+        ref: ref,
+        ...props
+    }));
+const RouterLinkBase = createLink(MantineLinkComponent);
+const RouterLinkButton = createLink(MantineButtonComponent);
+const RouterLinkActionIcon = createLink(MantineActionIconComponent);
+const RouterLinkUnstyledButton = createLink(MantineUnstyledButtonComponent);
+const RouterLink = Object.assign(RouterLinkBase, {
+    Button: RouterLinkButton,
+    ActionIcon: RouterLinkActionIcon,
+    UnstyledButton: RouterLinkUnstyledButton
+});
+export { RouterLink };

package/dist/ui/routerLink/index.js

@@ -0,0 +1 @@
+export * from "./RouterLink.js";

package/dist/ui/routerLink/styles.module.js

@@ -0,0 +1,5 @@
+import "./styles_module.css";
+const styles_module = {
+    root: "root-t5Mcrb"
+};
+export { styles_module as default };

package/dist/ui/routerLink/styles_module.css

@@ -0,0 +1,5 @@
+.root-t5Mcrb {
+  color: inherit;
+  text-decoration: none;
+}
+

package/dist/ui/saveInput/JsonInput.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Loader } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+import { JsonInput } from "../JsonInput.js";
+const JsonInput_JsonInput = ({ initialValue, onChange, debounce = 300, ...props })=>{
+    const [value, setValue] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsxs(Box, {
+        pos: "relative",
+        children: [
+            /*#__PURE__*/ jsx(JsonInput, {
+                value: value,
+                onChange: (e)=>{
+                    setValue(e);
+                    handleSave(e);
+                },
+                ...props
+            }),
+            loading && /*#__PURE__*/ jsx(Loader, {
+                size: "sm",
+                pos: "absolute",
+                top: 8,
+                left: 8
+            })
+        ]
+    });
+};
+export { JsonInput_JsonInput as JsonInput };

package/dist/ui/saveInput/NumberInput.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, NumberInput } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+const NumberInput_NumberInput = ({ initialValue, onChange, debounce = 300, ...props })=>{
+    const [value, setValue] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsx(NumberInput, {
+        value: value,
+        onChange: (v)=>{
+            setValue(v);
+            handleSave(v);
+        },
+        flex: props.w ? void 0 : 1,
+        rightSection: loading ? /*#__PURE__*/ jsx(Loader, {
+            size: "sm",
+            mr: 8
+        }) : void 0,
+        ...props
+    });
+};
+export { NumberInput_NumberInput as NumberInput };

package/dist/ui/saveInput/SaveInput.js

@@ -0,0 +1,15 @@
+import { JsonInput } from "./JsonInput.js";
+import { NumberInput } from "./NumberInput.js";
+import { Select } from "./Select.js";
+import { Switch } from "./Switch.js";
+import { Textarea } from "./Textarea.js";
+import { TextInput } from "./TextInput.js";
+const SaveInput = Object.assign(TextInput, {
+    TextInput: TextInput,
+    NumberInput: NumberInput,
+    Textarea: Textarea,
+    Switch: Switch,
+    JsonInput: JsonInput,
+    Select: Select
+});
+export { SaveInput };

package/dist/ui/saveInput/Select.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, Select } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+const Select_Select = ({ initialValue, onChange, debounce = 300, ...props })=>{
+    const [value, setValue] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsx(Select, {
+        value: value,
+        onChange: (v)=>{
+            setValue(v);
+            handleSave(v);
+        },
+        flex: props.w ? void 0 : 1,
+        disabled: loading,
+        rightSection: loading ? /*#__PURE__*/ jsx(Loader, {
+            size: "sm"
+        }) : void 0,
+        ...props
+    });
+};
+export { Select_Select as Select };

package/dist/ui/saveInput/Switch.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, Loader, Switch } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+const Switch_Switch = ({ initialValue, onChange, debounce = 300, w, ...props })=>{
+    const [value, setValue] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsx(Box, {
+        flex: 1,
+        w: w,
+        children: loading ? /*#__PURE__*/ jsx(Loader, {
+            size: "sm",
+            mt: 6.5,
+            ml: 8
+        }) : /*#__PURE__*/ jsx(Switch, {
+            checked: value,
+            onChange: (e)=>{
+                setValue(e.currentTarget.checked);
+                handleSave(e.currentTarget.checked);
+            },
+            ...props
+        })
+    });
+};
+export { Switch_Switch as Switch };

package/dist/ui/saveInput/TextInput.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, TextInput } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+const TextInput_TextInput = ({ initialValue, onChange, debounce = 300, ...props })=>{
+    const [value, setValue] = useState(initialValue || '');
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsx(TextInput, {
+        value: value,
+        onChange: (e)=>{
+            setValue(e.target.value);
+            handleSave(e.target.value);
+        },
+        flex: props.w ? void 0 : 1,
+        rightSection: loading ? /*#__PURE__*/ jsx(Loader, {
+            size: "sm"
+        }) : void 0,
+        ...props
+    });
+};
+export { TextInput_TextInput as TextInput };

package/dist/ui/saveInput/Textarea.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, Textarea } from "@mantine/core";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { useState } from "react";
+const Textarea_Textarea = ({ initialValue, onChange, debounce = 300, ...props })=>{
+    const [value, setValue] = useState(initialValue);
+    const [loading, setLoading] = useState(false);
+    const handleSave = useDebouncedCallback(async (content)=>{
+        setLoading(true);
+        await onChange(content);
+        setLoading(false);
+    }, debounce);
+    return /*#__PURE__*/ jsx(Textarea, {
+        value: value,
+        onChange: (e)=>{
+            setValue(e.target.value);
+            handleSave(e.target.value);
+        },
+        flex: props.w ? void 0 : 1,
+        rightSection: loading ? /*#__PURE__*/ jsx(Loader, {
+            size: "sm"
+        }) : void 0,
+        ...props
+    });
+};
+export { Textarea_Textarea as Textarea };

package/dist/ui/saveInput/index.js

@@ -0,0 +1,2 @@
+import { SaveInput } from "./SaveInput.js";
+export { SaveInput };

package/dist/ui/scrollArea/ScrollArea.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollAreaProvider } from "./context.js";
+import { ScrollAreaButton } from "./ScrollAreaButton.js";
+import { ScrollAreaContent } from "./ScrollAreaContent.js";
+import { useScrollAreaState } from "./useScrollArea.js";
+const ScrollAreaRoot = ({ children, autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 100, radius, ...mantineProps })=>{
+    const scrollAreaValue = useScrollAreaState({
+        autoScroll,
+        scrollToBottomOnInit,
+        animated,
+        nearThreshold
+    });
+    const contextValue = {
+        ...scrollAreaValue,
+        radius,
+        mantineProps
+    };
+    return /*#__PURE__*/ jsx(ScrollAreaProvider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(ScrollAreaContent, {
+            children: children
+        })
+    });
+};
+ScrollAreaRoot.displayName = 'ScrollArea';
+const ScrollArea = Object.assign(ScrollAreaRoot, {
+    ScrollButton: ScrollAreaButton,
+    Provider: ScrollAreaProvider
+});
+export { ScrollArea };

package/dist/ui/scrollArea/ScrollAreaButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@mantine/core";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { useScrollArea } from "./context.js";
+const ScrollAreaButton = ({ className, upIcon, downIcon })=>{
+    const { hasScrollableContent, isAboveCenter, scrollToTop, scrollToBottom } = useScrollArea();
+    if (!hasScrollableContent) return null;
+    const isScrollingDown = isAboveCenter;
+    const icon = isScrollingDown ? downIcon ?? /*#__PURE__*/ jsx(IconChevronDown, {
+        strokeWidth: 1.5
+    }) : upIcon ?? /*#__PURE__*/ jsx(IconChevronUp, {
+        strokeWidth: 1.5
+    });
+    const handleClick = ()=>{
+        if (isScrollingDown) scrollToBottom();
+        else scrollToTop();
+    };
+    return /*#__PURE__*/ jsx(ActionIcon, {
+        pos: "absolute",
+        bottom: 16,
+        right: 16,
+        variant: "light",
+        onClick: handleClick,
+        className: className,
+        "aria-label": isScrollingDown ? 'Scroll to bottom' : 'Scroll to top',
+        children: icon
+    });
+};
+ScrollAreaButton.displayName = 'ScrollArea.ScrollButton';
+export { ScrollAreaButton };

package/dist/ui/scrollArea/ScrollAreaContent.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ScrollArea, getRadius } from "@mantine/core";
+import { useContext } from "react";
+import { ScrollAreaContext } from "./context.js";
+import styles_module from "./styles.module.js";
+const ScrollAreaContent = ({ children })=>{
+    const fullContext = useContext(ScrollAreaContext);
+    if (!fullContext) throw new Error('ScrollAreaContent must be used within ScrollArea');
+    const { _callbackRef, mantineProps, radius, _contentResizeRef } = fullContext;
+    return /*#__PURE__*/ jsx(ScrollArea, {
+        classNames: {
+            viewport: styles_module.viewport,
+            content: styles_module.content,
+            scrollbar: styles_module.scrollbar
+        },
+        style: {
+            '--radius': radius ? getRadius(radius) : void 0
+        },
+        ...mantineProps,
+        viewportRef: _callbackRef,
+        children: /*#__PURE__*/ jsx(Box, {
+            h: "100%",
+            w: "100%",
+            ref: _contentResizeRef,
+            children: children
+        })
+    });
+};
+ScrollAreaContent.displayName = 'ScrollArea.Content';
+export { ScrollAreaContent };

package/dist/ui/scrollArea/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const ScrollAreaContext = /*#__PURE__*/ createContext(null);
+const ScrollAreaProvider = ScrollAreaContext.Provider;
+const useScrollArea = ()=>{
+    const context = useContext(ScrollAreaContext);
+    if (!context) throw new Error('useScrollArea must be used within ScrollArea');
+    const { _callbackRef, mantineProps: _, radius: __, ...publicAPI } = context;
+    return publicAPI;
+};
+export { ScrollAreaContext, ScrollAreaProvider, useScrollArea };

package/dist/ui/scrollArea/index.js

@@ -0,0 +1,3 @@
+import { useScrollArea } from "./context.js";
+import { ScrollArea } from "./ScrollArea.js";
+export { ScrollArea, useScrollArea };

package/dist/ui/scrollArea/styles.module.js

@@ -0,0 +1,7 @@
+import "./styles_module.css";
+const styles_module = {
+    viewport: "viewport-KXLjEt",
+    content: "content-An6Wm1",
+    scrollbar: "scrollbar-q5GUTX"
+};
+export { styles_module as default };

package/dist/ui/scrollArea/styles_module.css

@@ -0,0 +1,14 @@
+.viewport-KXLjEt {
+  border-radius: var(--radius);
+}
+
+.content-An6Wm1 {
+  width: 100%;
+  height: 100%;
+}
+
+.scrollbar-q5GUTX {
+  border-top-right-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+

package/dist/ui/scrollArea/useScrollArea.js

@@ -0,0 +1,146 @@
+import { useDebouncedCallback, useMergedRef, useResizeObserver } from "@mantine/hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+const useScrollAreaState = (options = {})=>{
+    const { autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 32 } = options;
+    const scrollAreaRef = useRef(null);
+    const isUserInteractingRef = useRef(false);
+    const userInteractionTimeoutRef = useRef(void 0);
+    const isInitializedRef = useRef(false);
+    const [contentResizeRef, contentRect] = useResizeObserver();
+    const [scrollPosition, setScrollPosition] = useState({
+        scrollTop: 0,
+        clientHeight: 0,
+        scrollHeight: 0
+    });
+    const isAtTop = 0 === scrollPosition.scrollTop;
+    const isAtBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight;
+    const isNearTop = scrollPosition.scrollTop <= nearThreshold;
+    const isNearBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight - nearThreshold;
+    const isAboveCenter = scrollPosition.scrollTop < (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
+    const hasScrollableContent = scrollPosition.scrollHeight > scrollPosition.clientHeight;
+    const debouncedUpdatePosition = useDebouncedCallback((element)=>{
+        const newPosition = {
+            scrollTop: element.scrollTop,
+            clientHeight: element.clientHeight,
+            scrollHeight: element.scrollHeight
+        };
+        setScrollPosition(newPosition);
+    }, {
+        delay: 16
+    });
+    const scrollToTop = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = 0;
+    }, [
+        animated
+    ]);
+    const scrollToBottom = useCallback((isAnimated)=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const shouldAnimate = isAnimated ?? animated;
+        if (shouldAnimate) element.scrollTo({
+            top: element.scrollHeight,
+            behavior: 'smooth'
+        });
+        else element.scrollTop = element.scrollHeight;
+        const scrollHeightBefore = element.scrollHeight;
+        setTimeout(()=>{
+            const scrollHeightAfter = element.scrollHeight;
+            const diff = element.scrollHeight - (element.scrollTop + element.clientHeight);
+            if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) element.scrollTop = element.scrollHeight;
+        }, 50);
+    }, [
+        animated
+    ]);
+    const performAutoScroll = useCallback(()=>{
+        if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) return;
+        if (isAtBottom) scrollToBottom(false);
+    }, [
+        autoScroll,
+        isAtBottom,
+        scrollToBottom
+    ]);
+    const handleUserInteraction = useCallback(()=>{
+        isUserInteractingRef.current = true;
+        if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        userInteractionTimeoutRef.current = setTimeout(()=>{
+            isUserInteractingRef.current = false;
+        }, 150);
+    }, []);
+    const handleScroll = useCallback((event)=>{
+        const element = event.target;
+        debouncedUpdatePosition(element);
+    }, [
+        debouncedUpdatePosition
+    ]);
+    useEffect(()=>{
+        if (!scrollToBottomOnInit || isInitializedRef.current) return;
+        if (hasScrollableContent) {
+            scrollToBottom(animated);
+            isInitializedRef.current = true;
+        }
+    }, [
+        scrollToBottomOnInit,
+        hasScrollableContent,
+        scrollToBottom,
+        animated
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element || 0 === contentRect.height) return;
+        debouncedUpdatePosition(element);
+        const timeoutId = setTimeout(performAutoScroll, 10);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        contentRect.height,
+        debouncedUpdatePosition,
+        performAutoScroll
+    ]);
+    useEffect(()=>{
+        const element = scrollAreaRef.current;
+        if (!element) return;
+        const events = [
+            'wheel',
+            'touchstart',
+            'touchmove',
+            'mousedown'
+        ];
+        element.addEventListener('scroll', handleScroll);
+        events.forEach((event)=>{
+            element.addEventListener(event, handleUserInteraction);
+        });
+        debouncedUpdatePosition(element);
+        return ()=>{
+            element.removeEventListener('scroll', handleScroll);
+            events.forEach((event)=>{
+                element.removeEventListener(event, handleUserInteraction);
+            });
+            if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
+        };
+    }, [
+        handleScroll,
+        handleUserInteraction,
+        debouncedUpdatePosition
+    ]);
+    const callbackRef = useMergedRef(scrollAreaRef);
+    return {
+        isAtTop,
+        isNearTop,
+        isAtBottom,
+        isNearBottom,
+        isAboveCenter,
+        hasScrollableContent,
+        scrollToTop,
+        scrollToBottom,
+        viewportRef: scrollAreaRef,
+        _callbackRef: callbackRef,
+        _contentResizeRef: contentResizeRef
+    };
+};
+export { useScrollAreaState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha-10",
+  "version": "3.0.0-alpha-12",
   "type": "module",
   "exports": {
     ".": {