@rolder/kit 3.0.0-alpha.76 → 3.0.0-alpha.78

package/dist/ai/ui/chat/Message.js

@@ -6,8 +6,7 @@ import { getIsStreaming, useChatMessage, useChatMessagePart } from "./store/inde
 const Message = /*#__PURE__*/ memo(({ messageId })=>{
     const message = useChatMessage(messageId);
     const part = useChatMessagePart(messageId, 'text');
-    console.log(messageId);
-    return part ? /*#__PURE__*/ jsx(Paper, {
+    return part?.text ? /*#__PURE__*/ jsx(Paper, {
         radius: "md",
         px: "md",
         py: "sm",

package/dist/ai/ui/chat/Messages.d.ts

@@ -0,0 +1,2 @@
+import type { ChatRootProps } from './Root';
+export declare const Messages: ({ children, height, radius, padding, scrollAreaProps, withScrollButton, stackProps, ...props }: Omit<ChatRootProps, "chatOptions">) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/Messages.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paper, Stack } from "@mantine/core";
+import { ScrollArea } from "../../../ui/index.js";
+import { useChatMessageIds } from "./store/index.js";
+const Messages = ({ children, height, radius = 'md', padding = 'md', scrollAreaProps, withScrollButton = true, stackProps, ...props })=>{
+    const messageIds = useChatMessageIds();
+    return /*#__PURE__*/ jsx(Paper, {
+        withBorder: true,
+        radius: radius,
+        ...props,
+        children: /*#__PURE__*/ jsxs(ScrollArea.Root, {
+            autoScroll: true,
+            height: height,
+            radius: radius,
+            ...scrollAreaProps,
+            children: [
+                /*#__PURE__*/ jsx(Stack, {
+                    p: padding,
+                    ...stackProps,
+                    children: 'function' == typeof children ? children(messageIds) : null
+                }),
+                withScrollButton && /*#__PURE__*/ jsx(ScrollArea.ScrollButton, {})
+            ]
+        })
+    });
+};
+export { Messages };

package/dist/ai/ui/chat/Root.d.ts

@@ -1,14 +1,15 @@
 import type { UseChatOptions } from '@ai-sdk/react';
-import { type PaperProps, type StackProps } from '@mantine/core';
+import type { MantineRadius, MantineSpacing, PaperProps, ScrollAreaProps, StackProps } from '@mantine/core';
 import type { ChatInit, UIMessage } from 'ai';
 import type { ReactNode } from 'react';
-import { type ScrollAreaProps } from '../../../ui';
-export interface ConversationRootProps extends PaperProps {
+export interface ChatRootProps extends PaperProps {
     children: (messageIds: string[]) => ReactNode;
-    h: string;
+    height: string;
+    radius?: MantineRadius;
+    padding?: MantineSpacing;
     scrollAreaProps?: Omit<ScrollAreaProps, 'children' | 'h'>;
     withScrollButton?: boolean;
-    stackProps?: StackProps;
+    stackProps?: Omit<StackProps, 'p'>;
     chatOptions?: UseChatOptions<UIMessage> & ChatInit<UIMessage>;
 }
 /**
@@ -26,6 +27,7 @@ export interface ConversationRootProps extends PaperProps {
  *           {messageIds.map((messageId) => (
  *             <Chat.Message key={messageId} messageId={messageId} />
  *           ))}
+ *
  *           <Chat.Empty />
  *           <Chat.Loader />
  *         </>
@@ -36,10 +38,12 @@ export interface ConversationRootProps extends PaperProps {
  * ```
  *
  * @param children - Render-функция, принимающая массив ID сообщений
- * @param h - Высота компонента (обязательный параметр)
+ * @param height - Высота компонента (обязательный параметр)
+ * @param radius - Радиус скругления углов компонента
+ * @param padding - Отступы внутри компонента
  * @param chatOptions - Опции для инициализации чата (API endpoint, начальные сообщения и т.д.)
  * @param scrollAreaProps - Пропсы для ScrollArea
  * @param withScrollButton - Показывать кнопку прокрутки (по умолчанию true)
  * @param stackProps - Пропсы для Stack контейнера
  */
-export declare const Root: ({ children, h, scrollAreaProps, withScrollButton, stackProps, chatOptions, ...props }: ConversationRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ chatOptions, ...props }: ChatRootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/Root.js

@@ -1,38 +1,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Paper, Stack } from "@mantine/core";
-import { ScrollArea } from "../../../ui/index.js";
-import { useChatMessageIds, useInitChat } from "./store/index.js";
+import { Messages } from "./Messages.js";
+import { useInitChat } from "./store/index.js";
 const ChatInitializer = ({ chatOptions })=>{
     useInitChat(chatOptions);
     return null;
 };
-const Root = ({ children, h, scrollAreaProps, withScrollButton = true, stackProps, chatOptions, ...props })=>{
-    const messageIds = useChatMessageIds();
-    return /*#__PURE__*/ jsxs(Fragment, {
+const Root = ({ chatOptions, ...props })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ChatInitializer, {
                 chatOptions: chatOptions
             }),
-            /*#__PURE__*/ jsx(Paper, {
-                withBorder: true,
-                radius: "md",
-                ...props,
-                children: /*#__PURE__*/ jsxs(ScrollArea, {
-                    autoScroll: true,
-                    scrollToBottomOnInit: true,
-                    p: "md",
-                    h: h,
-                    ...scrollAreaProps,
-                    children: [
-                        /*#__PURE__*/ jsx(Stack, {
-                            ...stackProps,
-                            children: 'function' == typeof children ? children(messageIds) : null
-                        }),
-                        withScrollButton && /*#__PURE__*/ jsx(ScrollArea.ScrollButton, {})
-                    ]
-                })
+            /*#__PURE__*/ jsx(Messages, {
+                ...props
             })
         ]
     });
-};
 export { Root };

package/dist/ai/ui/chat/index.d.ts

@@ -1,5 +1,5 @@
 export declare const Chat: {
-    Root: ({ children, h, scrollAreaProps, withScrollButton, stackProps, chatOptions, ...props }: import("./Root").ConversationRootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ chatOptions, ...props }: import("./Root").ChatRootProps) => import("react/jsx-runtime").JSX.Element;
     Message: import("react").MemoExoticComponent<({ messageId }: {
         messageId: string;
     }) => import("react/jsx-runtime").JSX.Element | null>;

package/dist/styles.css

@@ -62,11 +62,6 @@
   border-radius: var(--radius);
 }
 
-.rolder-scroll-area-content {
-  width: 100%;
-  height: 100%;
-}
-
 .rolder-scroll-area-scrollbar {
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);

package/dist/ui/editor/Content.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RichTextEditor } from "@mantine/tiptap";
 import { ScrollArea } from "../scrollArea/index.js";
-const Content = ({ height })=>/*#__PURE__*/ jsxs(ScrollArea, {
-        h: height,
+const Content = ({ height })=>/*#__PURE__*/ jsxs(ScrollArea.Root, {
+        height: height,
         autoScroll: true,
         radius: "md",
         children: [

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

@@ -0,0 +1,7 @@
+import { type MantineRadius, type ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
+export interface ScrollAreaProps extends Omit<MantineScrollAreaProps, 'h'> {
+    height: string;
+    radius?: MantineRadius;
+    autoScroll?: boolean;
+}
+export declare const Root: ({ children, height, radius, autoScroll, ...props }: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/scrollArea/Root.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, ScrollArea, getRadius } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+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/ui/scrollArea/ScrollButton.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from '@tabler/icons-react';
+export interface ScrollButtonProps {
+    /** CSS классы для стилизации кнопки */
+    className?: string;
+    /** Иконка для прокрутки вверх (по умолчанию IconChevronUp) */
+    upIcon?: ReactNode;
+    /** Иконка для прокрутки вниз (по умолчанию IconChevronDown) */
+    downIcon?: ReactNode;
+}
+export declare const ScrollButton: ({ className, upIcon, downIcon, }: ScrollButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/scrollArea/{ScrollAreaButton.js → ScrollButton.js}

@@ -1,11 +1,12 @@
 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();
+import { scrollToBottom, scrollToTop } from "./methods.js";
+import { useHasScrollableContent, useIsAboveCenter } from "./store.js";
+const ScrollButton = ({ className, upIcon, downIcon })=>{
+    const hasScrollableContent = useHasScrollableContent();
+    const isScrollingDown = useIsAboveCenter();
     if (!hasScrollableContent) return null;
-    const isScrollingDown = isAboveCenter;
     const icon = isScrollingDown ? downIcon ?? /*#__PURE__*/ jsx(IconChevronDown, {
         strokeWidth: 1.5
     }) : upIcon ?? /*#__PURE__*/ jsx(IconChevronUp, {
@@ -26,5 +27,4 @@ const ScrollAreaButton = ({ className, upIcon, downIcon })=>{
         children: icon
     });
 };
-ScrollAreaButton.displayName = 'ScrollArea.ScrollButton';
-export { ScrollAreaButton };
+export { ScrollButton };

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

@@ -1,3 +1,6 @@
-export { useScrollArea } from './context';
-export { ScrollArea } from './ScrollArea';
-export type { ScrollAreaContextValue, ScrollAreaHook, ScrollAreaProps, ScrollAreaState, ScrollButtonProps, ScrollPosition, } from './types';
+export declare const ScrollArea: {
+    Root: ({ children, height, radius, autoScroll, ...props }: import("./Root").ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
+    ScrollButton: ({ className, upIcon, downIcon, }: import("./ScrollButton").ScrollButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export type * from './Root';
+export type * from './ScrollButton';

package/dist/ui/scrollArea/index.js

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

package/dist/ui/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/ui/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/ui/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/ui/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

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.76",
+  "version": "3.0.0-alpha.78",
   "type": "module",
   "exports": {
     ".": {
@@ -41,10 +41,10 @@
     "@mantine/tiptap": "^8.3.12",
     "@nanostores/react": "^1.0.0",
     "@tanstack/react-form": "^1.27.7",
-    "@tanstack/react-query": "^5.90.18",
-    "@tanstack/react-router": "^1.151.0",
-    "@tanstack/react-router-ssr-query": "^1.151.0",
-    "@tanstack/react-start": "^1.151.0",
+    "@tanstack/react-query": "^5.90.19",
+    "@tanstack/react-router": "^1.151.1",
+    "@tanstack/react-router-ssr-query": "^1.151.1",
+    "@tanstack/react-start": "^1.151.1",
     "@tiptap/extension-highlight": "^3.15.3",
     "@tiptap/extension-placeholder": "^3.15.3",
     "@tiptap/extension-table": "^3.15.3",

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

@@ -1,62 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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/ScrollAreaContent.d.ts

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

package/dist/ui/scrollArea/ScrollAreaContent.js

@@ -1,29 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Box, ScrollArea, getRadius } from "@mantine/core";
-import { useContext } from "react";
-import { ScrollAreaContext } from "./context.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: 'rolder-scroll-area-viewport',
-            content: 'rolder-scroll-area-content',
-            scrollbar: 'rolder-scroll-area-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

@@ -1,28 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/types.d.ts

@@ -1,65 +0,0 @@
-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

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

package/dist/ui/scrollArea/useScrollArea.js

@@ -1,146 +0,0 @@
-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 (isNearBottom) scrollToBottom(false);
-    }, [
-        autoScroll,
-        isNearBottom,
-        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 };