@rolder-kit/ui 0.1.0-alpha.0

package/dist/saveInput/Select.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, Select, useDebouncedCallback } from "@rolder-kit/mantine";
+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/saveInput/Switch.d.ts

@@ -0,0 +1,6 @@
+import { type SwitchProps } from '@rolder-kit/mantine';
+export declare const Switch: React.FC<{
+    initialValue: boolean;
+    onChange: (value: boolean) => Promise<void>;
+    debounce?: number;
+} & Omit<SwitchProps, 'checked' | 'onChange'>>;

package/dist/saveInput/Switch.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, Loader, Switch, useDebouncedCallback } from "@rolder-kit/mantine";
+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/saveInput/TextInput.d.ts

@@ -0,0 +1,6 @@
+import { type TextInputProps } from '@rolder-kit/mantine';
+export declare const TextInput: React.FC<{
+    initialValue?: string;
+    onChange: (value: string) => Promise<void>;
+    debounce?: number;
+} & Omit<TextInputProps, 'value' | 'onChange'>>;

package/dist/saveInput/TextInput.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, TextInput, useDebouncedCallback } from "@rolder-kit/mantine";
+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/saveInput/Textarea.d.ts

@@ -0,0 +1,6 @@
+import { type TextareaProps } from '@rolder-kit/mantine';
+export declare const Textarea: React.FC<{
+    initialValue: string;
+    onChange: (value: string) => Promise<void>;
+    debounce?: number;
+} & Omit<TextareaProps, 'value' | 'onChange'>>;

package/dist/saveInput/Textarea.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Loader, Textarea, useDebouncedCallback } from "@rolder-kit/mantine";
+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/saveInput/index.d.ts

@@ -0,0 +1 @@
+export { SaveInput } from './SaveInput';

package/dist/saveInput/index.js

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

package/dist/scrollArea/Root.d.ts

@@ -0,0 +1,7 @@
+import { type MantineRadius, type ScrollAreaProps as MantineScrollAreaProps } from '@rolder-kit/mantine';
+export interface ScrollAreaProps extends Omit<MantineScrollAreaProps, 'h'> {
+    height: MantineScrollAreaProps['h'];
+    radius?: MantineRadius;
+    autoScroll?: boolean;
+}
+export declare const Root: React.FC<ScrollAreaProps>;

package/dist/scrollArea/Root.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ScrollArea, getRadius, useElementSize } from "@rolder-kit/mantine";
+import { useEffect, useRef } from "react";
+import { isAboveCenter } from "./methods.js";
+import { getHasScrollableContent, getHeight, getIsAboveCenter, getScrollAreaRef, setAutoScroll, setHeight, setIsAboveCenter, setScrollAreaRef } from "./store.js";
+const Root = ({ children, height, radius, autoScroll = false, ...props })=>{
+    const scrollAreaRef = useRef(null);
+    const { ref: boxRef, height: contentHeight } = useElementSize();
+    useEffect(()=>{
+        setAutoScroll(autoScroll);
+    });
+    useEffect(()=>{
+        if (getHeight() !== contentHeight) setHeight(contentHeight);
+        if (scrollAreaRef.current && !getScrollAreaRef()) setScrollAreaRef(scrollAreaRef.current);
+    }, [
+        contentHeight
+    ]);
+    return /*#__PURE__*/ jsx(ScrollArea, {
+        viewportRef: scrollAreaRef,
+        h: height,
+        classNames: {
+            viewport: 'rolder-scroll-area-viewport',
+            scrollbar: 'rolder-scroll-area-scrollbar'
+        },
+        style: {
+            '--radius': radius ? getRadius(radius) : void 0
+        },
+        onScrollPositionChange: ()=>{
+            if (getHasScrollableContent()) {
+                const current = isAboveCenter();
+                if (getIsAboveCenter() !== current) setIsAboveCenter(current);
+            }
+        },
+        ...props,
+        children: /*#__PURE__*/ jsx(Box, {
+            ref: boxRef,
+            children: children
+        })
+    });
+};
+export { Root };

package/dist/scrollArea/ScrollButton.d.ts

@@ -0,0 +1,7 @@
+import { type ActionIconProps } from '@rolder-kit/mantine';
+import { type ReactNode } from '@tabler/icons-react';
+export interface ScrollButtonProps extends ActionIconProps {
+    upIcon?: ReactNode;
+    downIcon?: ReactNode;
+}
+export declare const ScrollButton: React.FC<ScrollButtonProps>;

package/dist/scrollArea/ScrollButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon } from "@rolder-kit/mantine";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { scrollToBottom, scrollToTop } from "./methods.js";
+import { useHasScrollableContent, useIsAboveCenter } from "./store.js";
+const ScrollButton = ({ upIcon, downIcon, ...props })=>{
+    const hasScrollableContent = useHasScrollableContent();
+    const isScrollingDown = useIsAboveCenter();
+    if (!hasScrollableContent) return null;
+    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,
+        "aria-label": isScrollingDown ? 'Scroll to bottom' : 'Scroll to top',
+        ...props,
+        children: icon
+    });
+};
+export { ScrollButton };

package/dist/scrollArea/index.d.ts

@@ -0,0 +1,6 @@
+export declare const ScrollArea: {
+    Root: import("react").FC<import("./Root").ScrollAreaProps>;
+    ScrollButton: import("react").FC<import("./ScrollButton").ScrollButtonProps>;
+};
+export type * from './Root';
+export type * from './ScrollButton';

package/dist/scrollArea/index.js

@@ -0,0 +1,7 @@
+import { Root } from "./Root.js";
+import { ScrollButton } from "./ScrollButton.js";
+const ScrollArea = {
+    Root: Root,
+    ScrollButton: ScrollButton
+};
+export { ScrollArea };

package/dist/scrollArea/methods.d.ts

@@ -0,0 +1,4 @@
+export declare const scrollToBottom: () => void;
+export declare const scrollToTop: () => void;
+export declare const isAboveCenter: () => boolean;
+export declare const hasScrollableContent: () => boolean;

package/dist/scrollArea/methods.js

@@ -0,0 +1,32 @@
+import { getScrollAreaRef } from "./store.js";
+const scrollToBottom = ()=>{
+    const ref = getScrollAreaRef();
+    if (!ref) return;
+    ref.scrollTo({
+        top: ref.scrollHeight,
+        behavior: 'smooth'
+    });
+};
+const scrollToTop = ()=>{
+    const ref = getScrollAreaRef();
+    if (!ref) return;
+    ref.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+};
+const isAboveCenter = ()=>{
+    const ref = getScrollAreaRef();
+    if (!ref) return false;
+    const { scrollTop, scrollHeight, clientHeight } = ref;
+    const viewportCenter = scrollTop + clientHeight / 2;
+    const contentCenter = scrollHeight / 2;
+    return viewportCenter < contentCenter;
+};
+const hasScrollableContent = ()=>{
+    const ref = getScrollAreaRef();
+    if (!ref) return false;
+    const { scrollHeight, clientHeight } = ref;
+    return scrollHeight > clientHeight;
+};
+export { hasScrollableContent, isAboveCenter, scrollToBottom, scrollToTop };

package/dist/scrollArea/store.d.ts

@@ -0,0 +1,12 @@
+export declare const getScrollAreaRef: () => HTMLElement | null;
+export declare const setScrollAreaRef: (scrollAreaRef: HTMLElement | null) => void;
+export declare const getHeight: () => number;
+export declare const setHeight: (height: number) => void;
+export declare const getAutoScroll: () => boolean;
+export declare const setAutoScroll: (autoScroll: boolean) => void;
+export declare const getHasScrollableContent: () => boolean;
+export declare const useHasScrollableContent: () => boolean;
+export declare const setHasScrollableContent: (hasScrollableContent: boolean) => void;
+export declare const getIsAboveCenter: () => boolean;
+export declare const useIsAboveCenter: () => boolean;
+export declare const setIsAboveCenter: (isAboveCenter: boolean) => void;

package/dist/scrollArea/store.js

@@ -0,0 +1,25 @@
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+import { hasScrollableContent as external_methods_js_hasScrollableContent, scrollToBottom } from "./methods.js";
+const $scrollAreaRef = atom(null);
+const getScrollAreaRef = ()=>$scrollAreaRef.get();
+const setScrollAreaRef = (scrollAreaRef)=>$scrollAreaRef.set(scrollAreaRef);
+const $height = atom(0);
+const getHeight = ()=>$height.get();
+const setHeight = (height)=>$height.set(height);
+const $autoScroll = atom(false);
+const getAutoScroll = ()=>$autoScroll.get();
+const setAutoScroll = (autoScroll)=>$autoScroll.set(autoScroll);
+const $hasScrollableContent = atom(false);
+const getHasScrollableContent = ()=>$hasScrollableContent.get();
+const useHasScrollableContent = ()=>useStore($hasScrollableContent);
+const setHasScrollableContent = (hasScrollableContent)=>$hasScrollableContent.set(hasScrollableContent);
+const $isAboveCenter = atom(false);
+const getIsAboveCenter = ()=>$isAboveCenter.get();
+const useIsAboveCenter = ()=>useStore($isAboveCenter);
+const setIsAboveCenter = (isAboveCenter)=>$isAboveCenter.set(isAboveCenter);
+$height.listen((height)=>{
+    if (getAutoScroll() && height) scrollToBottom();
+    if (external_methods_js_hasScrollableContent() && !getHasScrollableContent()) setHasScrollableContent(true);
+});
+export { getAutoScroll, getHasScrollableContent, getHeight, getIsAboveCenter, getScrollAreaRef, setAutoScroll, setHasScrollableContent, setHeight, setIsAboveCenter, setScrollAreaRef, useHasScrollableContent, useIsAboveCenter };

package/package.json

@@ -0,0 +1,53 @@
+{
+	"name": "@rolder-kit/ui",
+	"version": "0.1.0-alpha.0",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./editor": {
+			"types": "./dist/editor/index.d.ts",
+			"import": "./dist/editor/index.js"
+		},
+		"./ui": {
+			"types": "./dist/ui/index.d.ts",
+			"import": "./dist/ui/index.js"
+		},
+		"./notifications": {
+			"types": "./dist/notifications.d.ts",
+			"import": "./dist/notifications.js"
+		}
+	},
+	"sideEffects": false,
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "rslib build",
+		"dev": "rslib build --watch",
+		"prepublishOnly": "bun run build",
+		"check": "biome check --write && tsc --noEmit"
+	},
+	"peerDependencies": {
+		"@rolder-kit/tanstack": "*",
+		"@rolder-kit/mantine": "*",
+		"@mantine/tiptap": "^8.3.14",
+		"@tiptap/extension-highlight": "^3.19.0",
+		"@tiptap/extension-placeholder": "^3.19.0",
+		"@tiptap/extension-table": "^3.19.0",
+		"@tiptap/extension-task-item": "^3.19.0",
+		"@tiptap/extension-task-list": "^3.19.0",
+		"@tiptap/extension-text-align": "^3.19.0",
+		"@tiptap/react": "^3.19.0",
+		"@tiptap/starter-kit": "^3.19.0",
+		"nanostores": "^1.1.0",
+		"@nanostores/react": "^1.0.0",
+		"@tanstack/react-router": "^1.160.0",
+		"@tanstack/react-form": "^1.28.3",
+		"@uiw/react-codemirror": "^4.25.4",
+		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lint": "^6.9.4"
+	}
+}