@kkkarsss/ui 1.4.0 → 1.4.1

package/dist/providers/index.d.ts

@@ -7,3 +7,5 @@ export { ThemeProvider } from './theme/theme-provider';
 export { AlertContext, type TAlert } from './alert/alert-context';
 export { AlertProvider } from './alert/alert-provider';
 export { useAlerts } from './alert/use-alerts';
+export { LayoutProvider } from './layout/layout-context';
+export { useLayout } from './layout/use-layout';

package/dist/providers/index.js

@@ -7,3 +7,5 @@ export { ThemeProvider } from './theme/theme-provider';
 export { AlertContext } from './alert/alert-context';
 export { AlertProvider } from './alert/alert-provider';
 export { useAlerts } from './alert/use-alerts';
+export { LayoutProvider } from './layout/layout-context';
+export { useLayout } from './layout/use-layout';

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

@@ -0,0 +1,12 @@
+import { type FC, type PropsWithChildren } from 'react';
+export type TExpandedPanel = 'left' | 'right' | null;
+type TLayoutContext = {
+    expandedPanel: TExpandedPanel;
+    setExpandedPanel: (panel: TExpandedPanel) => void;
+    toggleLeftPanel: () => void;
+    toggleRightPanel: () => void;
+    closePanels: () => void;
+};
+export declare const LayoutContext: import("react").Context<TLayoutContext | undefined>;
+export declare const LayoutProvider: FC<PropsWithChildren>;
+export {};

package/dist/providers/layout/layout-context.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo } from 'react';
+export const LayoutContext = createContext(undefined);
+export const LayoutProvider = ({ children }) => {
+    const [expandedPanel, setExpandedPanel] = useState(null);
+    const toggleLeftPanel = () => setExpandedPanel((prev) => (prev === 'left' ? null : 'left'));
+    const toggleRightPanel = () => setExpandedPanel((prev) => (prev === 'right' ? null : 'right'));
+    const closePanels = () => setExpandedPanel(null);
+    const value = useMemo(() => ({
+        expandedPanel,
+        setExpandedPanel,
+        toggleLeftPanel,
+        toggleRightPanel,
+        closePanels,
+    }), [expandedPanel]);
+    return _jsx(LayoutContext.Provider, { value: value, children: children });
+};

package/dist/providers/layout/use-layout.d.ts

@@ -0,0 +1,7 @@
+export declare const useLayout: () => {
+    expandedPanel: import("./layout-context").TExpandedPanel;
+    setExpandedPanel: (panel: import("./layout-context").TExpandedPanel) => void;
+    toggleLeftPanel: () => void;
+    toggleRightPanel: () => void;
+    closePanels: () => void;
+};

package/dist/providers/layout/use-layout.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { LayoutContext } from './layout-context';
+export const useLayout = () => {
+    const context = useContext(LayoutContext);
+    if (!context) {
+        throw new Error('useLayout must be used within a LayoutProvider');
+    }
+    return context;
+};

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

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu, X } from 'lucide-react';
-import { Fragment, useState } from 'react';
-import { useWidget } from '../../../providers';
+import { Fragment } from 'react';
+import { useWidget, useLayout } from '../../../providers';
 import { jc } from '../../../utils';
 import { Flex } from '../flex/flex';
 import { IconAction } from '../icon-action/icon-action';
 export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
-    const [expandedPanel, setExpandedPanel] = useState(null);
-    const toggleLeft = () => setExpandedPanel(expandedPanel === 'left' ? null : 'left');
-    const toggleRight = () => setExpandedPanel(expandedPanel === 'right' ? null : 'right');
-    return (_jsx("div", { className: "@container/layout w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s/layout:grid-cols-[300px_1fr_300px] @s/layout:py-xl @s/layout:px-l @s/layout:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s/layout:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s/layout:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeft }) }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s/layout:flex' : 'flex', 'h-full mt-[50px] @s/layout:m-0'), children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "hidden @s/layout:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s/layout:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRight }) }), expandedPanel && (_jsx("div", { className: "@s/layout:hidden absolute inset-0 z-40 bg-[var(--background)] pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
+    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 @m:grid-cols-[300px_1fr_300px] @m:py-xl @m:px-l @m:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @m:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@m: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, { justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @m:flex' : 'flex', 'h-full'), children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "hidden @m:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@m: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: "@m: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.4.0",
+  "version": "1.4.1",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",