@rolder/kit 3.0.0-alpha-1

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.d.ts

@@ -0,0 +1,36 @@
+export declare const SaveInput: (({ initialValue, onChange, debounce, ...props }: {
+    initialValue?: string;
+    onChange: (value: string) => Promise<void>;
+    debounce?: number;
+} & Omit<import("@mantine/core").TextInputProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element) & {
+    TextInput: ({ initialValue, onChange, debounce, ...props }: {
+        initialValue?: string;
+        onChange: (value: string) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@mantine/core").TextInputProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+    NumberInput: ({ initialValue, onChange, debounce, ...props }: {
+        initialValue: string | number;
+        onChange: (value: string | number) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@mantine/core").NumberInputProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+    Textarea: ({ initialValue, onChange, debounce, ...props }: {
+        initialValue: string;
+        onChange: (value: string) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@mantine/core").TextareaProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+    Switch: ({ initialValue, onChange, debounce, w, ...props }: {
+        initialValue: boolean;
+        onChange: (value: boolean) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@mantine/core").SwitchProps, "checked" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+    JsonInput: ({ initialValue, onChange, debounce, ...props }: {
+        initialValue: string;
+        onChange: (value: string) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@uiw/react-codemirror").ReactCodeMirrorProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+    Select: ({ initialValue, onChange, debounce, ...props }: {
+        initialValue: string | null;
+        onChange: (value: string | null) => Promise<void>;
+        debounce?: number;
+    } & Omit<import("@mantine/core").SelectProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;
+};

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.d.ts

@@ -0,0 +1,6 @@
+import { type SelectProps } from '@mantine/core';
+export declare const Select: ({ initialValue, onChange, debounce, ...props }: {
+    initialValue: string | null;
+    onChange: (value: string | null) => Promise<void>;
+    debounce?: number;
+} & Omit<SelectProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,6 @@
+import { type SwitchProps } from '@mantine/core';
+export declare const Switch: ({ initialValue, onChange, debounce, w, ...props }: {
+    initialValue: boolean;
+    onChange: (value: boolean) => Promise<void>;
+    debounce?: number;
+} & Omit<SwitchProps, "checked" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,6 @@
+import { type TextInputProps } from '@mantine/core';
+export declare const TextInput: ({ initialValue, onChange, debounce, ...props }: {
+    initialValue?: string;
+    onChange: (value: string) => Promise<void>;
+    debounce?: number;
+} & Omit<TextInputProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,6 @@
+import { type TextareaProps } from '@mantine/core';
+export declare const Textarea: ({ initialValue, onChange, debounce, ...props }: {
+    initialValue: string;
+    onChange: (value: string) => Promise<void>;
+    debounce?: number;
+} & Omit<TextareaProps, "value" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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.d.ts

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

package/dist/ui/saveInput/index.js

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

package/dist/ui/scrollArea/ScrollArea.d.ts

@@ -0,0 +1,62 @@
+import type { ScrollAreaContextValue, ScrollAreaProps } from './types';
+/**
+ * ScrollArea Component - Расширенная область прокрутки с автоскроллом
+ *
+ * @example
+ * // Базовое использование
+ * <ScrollArea h={300}>
+ *   <div>Контент для прокрутки</div>
+ * </ScrollArea>
+ *
+ * @example
+ * // С автоскроллом и кнопкой
+ * <ScrollArea autoScroll scrollToBottomOnInit h={400}>
+ *   <div>Чат сообщения...</div>
+ *   <ScrollArea.ScrollButton className="absolute bottom-4 right-4" />
+ * </ScrollArea>
+ *
+ * @example
+ * // С кастомными настройками
+ * <ScrollArea
+ *   autoScroll={true}
+ *   animated={true}
+ *   nearThreshold={50}
+ *   h={300}
+ *   scrollbarSize={6}
+ *   type="hover"
+ * >
+ *   {messages.map(msg => <div key={msg.id}>{msg.text}</div>)}
+ *   <ScrollArea.ScrollButton
+ *     className="absolute bottom-4 right-4"
+ *     upIcon={<CustomUpIcon />}
+ *     downIcon={<CustomDownIcon />}
+ *   />
+ * </ScrollArea>
+ *
+ * @example
+ * // Использование хука для доступа к viewport
+ * function CustomControl() {
+ *   const { isAtBottom, scrollToBottom, viewportRef } = useScrollArea();
+ *
+ *   const scrollToElement = () => {
+ *     const target = viewportRef.current?.querySelector('[data-target]');
+ *     target?.scrollIntoView();
+ *   };
+ *
+ *   return (
+ *     <button onClick={scrollToBottom} disabled={isAtBottom}>
+ *       Прокрутить вниз
+ *     </button>
+ *   );
+ * }
+ */
+export declare const ScrollArea: {
+    ({ children, autoScroll, scrollToBottomOnInit, animated, nearThreshold, radius, ...mantineProps }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    ScrollButton: {
+        ({ className, upIcon, downIcon, }: import("./types").ScrollButtonProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Provider: import("react").Provider<ScrollAreaContextValue | null>;
+};

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.d.ts

@@ -0,0 +1,5 @@
+import type { ScrollButtonProps } from './types';
+export declare const ScrollAreaButton: {
+    ({ className, upIcon, downIcon, }: ScrollButtonProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

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.d.ts

@@ -0,0 +1,6 @@
+export declare const ScrollAreaContent: {
+    ({ children, }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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.d.ts

@@ -0,0 +1,28 @@
+import type { ScrollAreaContextValue, ScrollAreaHook } from './types';
+/** Внутренний контекст для передачи состояния ScrollArea */
+export declare const ScrollAreaContext: import("react").Context<ScrollAreaContextValue | null>;
+export declare const ScrollAreaProvider: import("react").Provider<ScrollAreaContextValue | null>;
+/**
+ * Хук для доступа к состоянию и методам ScrollArea
+ *
+ * @returns Объект с индикаторами позиции, методами управления и ref на viewport
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isAtBottom, scrollToTop, viewportRef } = useScrollArea();
+ *
+ *   const scrollToElement = () => {
+ *     const target = viewportRef.current?.querySelector('[data-target]');
+ *     target?.scrollIntoView();
+ *   };
+ *
+ *   return (
+ *     <button onClick={scrollToTop} disabled={isAtTop}>
+ *       В начало
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare const useScrollArea: () => ScrollAreaHook;

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.d.ts

@@ -0,0 +1,3 @@
+export { useScrollArea } from './context';
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaContextValue, ScrollAreaHook, ScrollAreaProps, ScrollAreaState, ScrollButtonProps, ScrollPosition, } from './types';

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/types.d.ts

@@ -0,0 +1,65 @@
+import type { MantineRadius, ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+export interface ScrollAreaProps extends Omit<MantineScrollAreaProps, 'children'> {
+    /** Включение автоскролла при добавлении контента (по умолчанию false) */
+    autoScroll?: boolean;
+    /** Прокрутить к концу при инициализации компонента (по умолчанию false) */
+    scrollToBottomOnInit?: boolean;
+    /** Анимированная прокрутка (по умолчанию true) */
+    animated?: boolean;
+    /** Отступ для near-зон в пикселях (по умолчанию 100) */
+    nearThreshold?: number;
+    /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
+    radius?: MantineRadius;
+    /** Дочерние элементы - автоматически оборачиваются в ScrollArea.Content */
+    children: ReactNode;
+}
+export interface ScrollAreaHook {
+    /** Точно в начале (scrollTop === 0) */
+    isAtTop: boolean;
+    /** В пределах nearThreshold от начала */
+    isNearTop: boolean;
+    /** Точно в конце (scrollTop + clientHeight >= scrollHeight) */
+    isAtBottom: boolean;
+    /** В пределах nearThreshold от конца */
+    isNearBottom: boolean;
+    /** Выше центральной точки области прокрутки */
+    isAboveCenter: boolean;
+    /** Есть контент требующий прокрутки */
+    hasScrollableContent: boolean;
+    /** Прокрутить к началу области */
+    scrollToTop: (animated?: boolean) => void;
+    /** Прокрутить к концу области */
+    scrollToBottom: (animated?: boolean) => void;
+    /** React ref на viewport элемент для прямого доступа к DOM */
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface ScrollAreaState extends ScrollAreaHook {
+    /** Внутренний callback ref для подключения к Mantine ScrollArea */
+    _callbackRef: (node: HTMLDivElement | null) => void;
+    /** Внутренний ref для наблюдения за изменениями контента */
+    _contentResizeRef: (node: HTMLDivElement | null) => void;
+}
+export interface ScrollAreaContextValue extends ScrollAreaState {
+    /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
+    radius?: MantineRadius;
+    /** Пропсы Mantine ScrollArea, переданные в корневой компонент */
+    mantineProps: Omit<MantineScrollAreaProps, 'children'>;
+}
+export interface ScrollButtonProps {
+    /** CSS классы для стилизации кнопки */
+    className?: string;
+    /** Иконка для прокрутки вверх (по умолчанию IconChevronUp) */
+    upIcon?: ReactNode;
+    /** Иконка для прокрутки вниз (по умолчанию IconChevronDown) */
+    downIcon?: ReactNode;
+}
+/** Внутренний тип для отслеживания позиции скролла */
+export interface ScrollPosition {
+    /** Текущая позиция скролла сверху */
+    scrollTop: number;
+    /** Высота видимой области */
+    clientHeight: number;
+    /** Общая высота прокручиваемого контента */
+    scrollHeight: number;
+}

package/dist/ui/scrollArea/useScrollArea.d.ts

@@ -0,0 +1,9 @@
+import type { ScrollAreaState } from './types';
+interface UseScrollAreaOptions {
+    autoScroll?: boolean;
+    scrollToBottomOnInit?: boolean;
+    animated?: boolean;
+    nearThreshold?: number;
+}
+export declare const useScrollAreaState: (options?: UseScrollAreaOptions) => ScrollAreaState;
+export {};