@kkkarsss/ui 1.5.0 → 1.5.2

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (query: string) => boolean;
+export declare const useIsMobile: () => boolean;

package/dist/hooks/use-media-query.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export const useMediaQuery = (query) => {
+    const [matches, setMatches] = useState(false);
+    useEffect(() => {
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = () => setMatches(media.matches);
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, [matches, query]);
+    return matches;
+};
+export const useIsMobile = () => useMediaQuery('(max-width: 800px)');

package/dist/providers/widget/widget-context.d.ts

@@ -3,6 +3,7 @@ import type { TBlockProps } from '../../ui';
 export type TWidget = {
     ui: ReactElement<TBlockProps>;
     id: string;
+    isFullWidth?: boolean;
 };
 type TWidgetProviderState = {
     widget: TWidget | null;

package/dist/ui/information/widget/widget.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Maximize2, Minimize2, X } from 'lucide-react';
+import { useIsMobile } from '../../../hooks/use-media-query';
 import { Flex, IconAction } from '../../layout';
 import { Block } from '../block/block';
 export const Widget = ({ children, title, isFullWidth, onToggleFullWidth, onClose, topAcc, maxWidth = '400px', ...blockProps }) => {
+    const isMobile = useIsMobile();
     const systemActions = (_jsxs(Flex, { align: 'center', gap: '4px', children: [onToggleFullWidth && (_jsx(IconAction, { icon: isFullWidth ? (_jsx(Minimize2, { size: 16, color: 'var(--secondary-foreground)' })) : (_jsx(Maximize2, { size: 16, color: 'var(--secondary-foreground)' })), onClick: onToggleFullWidth })), onClose && _jsx(IconAction, { icon: _jsx(X, { size: 16, color: 'var(--secondary-foreground)' }), onClick: onClose })] }));
-    return (_jsx(Block, { ...blockProps, title: title, maxWidth: isFullWidth ? '100%' : maxWidth, topAcc: _jsxs(Flex, { align: 'center', gap: '8px', children: [topAcc, systemActions] }), children: children }));
+    return (_jsx(Block, { ...blockProps, title: title, maxWidth: isMobile ? undefined : isFullWidth ? '100%' : maxWidth, topAcc: _jsxs(Flex, { align: 'center', gap: '8px', children: [topAcc, systemActions] }), children: children }));
 };

package/dist/ui/layout/main-page-layout/main-page-layout.js

@@ -8,5 +8,5 @@ import { IconAction } from '../icon-action/icon-action';
 export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
     const { expandedPanel, toggleLeftPanel, toggleRightPanel } = useLayout();
-    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [_jsx("div", { className: jc('h-full overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children }), widget && (_jsx("div", { className: "flex-1 min-h-0 h-full w-full @s:flex-initial @s:w-[360px]", children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
+    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [!widget?.isFullWidth && (_jsx("div", { className: jc('h-full overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children })), widget && (_jsx("div", { className: jc('flex-1 min-h-0 h-full w-full', !widget.isFullWidth && '@s:flex-initial @s:w-[360px]'), children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",