@kkkarsss/ui 1.3.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.d.ts

@@ -1,7 +1,10 @@
-import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+import { LucideProps } from 'lucide-react';
+import { type FC, type PropsWithChildren, type ReactNode, ReactElement } from 'react';
 type TProps = {
     leftPanel?: ReactNode;
     rightPanel?: ReactNode;
+    leftIcon?: ReactElement<LucideProps>;
+    rightIcon?: ReactElement<LucideProps>;
 };
 export declare const MainPageLayout: FC<PropsWithChildren<TProps>>;
 export {};

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

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, X } from 'lucide-react';
 import { Fragment } from 'react';
-import { useWidget } from '../../../providers';
+import { useWidget, useLayout } from '../../../providers';
+import { jc } from '../../../utils';
 import { Flex } from '../flex/flex';
-export const MainPageLayout = ({ children, leftPanel, rightPanel }) => {
+import { IconAction } from '../icon-action/icon-action';
+export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
-    return (_jsxs("main", { className: "grid h-[100dvh] w-full grid-cols-[300px_1fr_300px] py-xl px-l gap-l", children: [_jsx("aside", { className: "h-full w-full", children: leftPanel }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "h-full w-full", children: 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/dist/ui/layout/main-page-layout/main-page-layout.stories.js

@@ -1,19 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, BookmarkCheck, Calendar, Clock3, LandPlot, Newspaper, Settings, User } from 'lucide-react';
 import { MainPageLayout } from './main-page-layout';
-import { Typo } from '../../information';
+import { Block, Cell, CellsBlock, Typo } from '../../information';
+import { Flex } from '../flex/flex';
+import { Offset } from '../offset/offset';
 const meta = {
     title: 'Layout/MainPageLayout',
     component: MainPageLayout,
     tags: ['autodocs'],
     parameters: {
         layout: 'fullscreen',
+        chromatic: { delay: 300 },
     },
 };
 export default meta;
+const LeftSidebarMock = () => (_jsx(Flex, { direction: 'column', gap: '16px', type: 'fill', children: _jsxs(CellsBlock, { title: _jsx(Typo, { size: 'm', weight: '500', color: 'secondary', children: "John Doe" }), children: [_jsx(Cell, { title: _jsx(Typo, { children: "Tasks" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Manage everything you should do" }), accLeft: [{ icon: BookmarkCheck }], active: true }), _jsx(Cell, { title: _jsx(Typo, { children: "Projects" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Unite tasks and data in one screen" }), accLeft: [{ icon: LandPlot }] }), _jsx(Cell, { title: _jsx(Typo, { children: "Tips" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Notes to your tasks and projects" }), accLeft: [{ icon: Newspaper }] }), _jsx(Cell, { title: _jsx(Typo, { children: "Calendar" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Your routine and added tasks" }), accLeft: [{ icon: Calendar }] })] }) }));
+const RightSidebarMock = () => (_jsxs(Flex, { direction: 'column', type: 'fill', gap: '16px', children: [_jsx(CellsBlock, { title: _jsx(Typo, { size: 'm', color: 'secondary', weight: '500', children: "Variables" }), children: _jsx(Cell, { title: _jsx(Typo, { children: "System settings" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Do not affect the calculation" }), accLeft: [{ icon: Settings }] }) }), _jsxs(CellsBlock, { title: _jsx(Typo, { size: 'm', color: 'secondary', weight: '500', children: "Stats" }), children: [_jsx(Cell, { title: _jsx(Typo, { children: "Productivity" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Tasks/day" }), accLeft: [{ icon: Activity }] }), _jsx(Cell, { title: _jsx(Typo, { children: "Latest activity" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "History of your actions across service" }), accLeft: [{ icon: Clock3 }] })] })] }));
 export const Default = {
     args: {
-        leftPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-r border-border", children: [_jsx(Typo, { weight: "500", children: "Left Panel" }), _jsx(Typo, { size: "s", children: "Navigation or filters" })] })),
-        rightPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-l border-border", children: [_jsx(Typo, { weight: "500", children: "Right Panel" }), _jsx(Typo, { size: "s", children: "Additional info" })] })),
-        children: (_jsxs("div", { className: "w-full h-full bg-background-accent p-4 rounded-xl shadow-sm", children: [_jsx(Typo, { size: "xl", weight: "500", children: "Main Content Area" }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Typo, { children: "This is where the main application content goes." }), _jsx(Typo, { color: "secondary", children: "It is centered and has a gap between panels." })] })] })),
+        leftIcon: _jsx(Settings, { size: 20 }),
+        rightIcon: _jsx(User, { size: 20 }),
+        leftPanel: _jsx(LeftSidebarMock, {}),
+        rightPanel: _jsx(RightSidebarMock, {}),
+        children: (_jsx(Block, { title: _jsx(Typo, { size: "xl", weight: "500", children: "Main Content Area" }), children: _jsxs(Offset, { children: [_jsx(Typo, { children: "\u042D\u0442\u043E \u0434\u0435\u043C\u043E-\u0432\u0435\u0440\u0441\u0438\u044F \u043E\u0441\u043D\u043E\u0432\u043D\u043E\u0433\u043E \u043C\u0430\u043A\u0435\u0442\u0430 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u0441 \u0430\u0434\u0430\u043F\u0442\u0438\u0432\u043D\u044B\u043C\u0438 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430\u043C\u0438." }), _jsx(Typo, { color: "secondary", children: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0448\u0438\u0440\u0438\u043D\u0443 \u043E\u043A\u043D\u0430 (\u0438\u043B\u0438 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430 \u0432 Storybook), \u0447\u0442\u043E\u0431\u044B \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u0430\u0434\u0430\u043F\u0442\u0438\u0432\u043D\u043E\u0435 \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435:" }), _jsxs("ul", { className: "list-disc ml-6 space-y-2", children: [_jsx("li", { children: _jsx(Typo, { size: "s", children: "\u041F\u0440\u0438 \u0448\u0438\u0440\u0438\u043D\u0435 > 1100px (L): \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u044E\u0442\u0441\u044F \u043E\u0431\u0430 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430." }) }), _jsx("li", { children: _jsx(Typo, { size: "s", children: "\u041F\u0440\u0438 \u0448\u0438\u0440\u0438\u043D\u0435 680px - 1100px (M): \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u044E\u0442\u0441\u044F \u043E\u0431\u0430 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430 (\u043D\u0430 \u0431\u0430\u0437\u0435 @m/layout)." }) }), _jsx("li", { children: _jsx(Typo, { size: "s", children: "\u041F\u0440\u0438 \u0448\u0438\u0440\u0438\u043D\u0435 < 680px (S): \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u044B \u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0442\u0441\u044F, \u043F\u043E\u044F\u0432\u043B\u044F\u044E\u0442\u0441\u044F \u0438\u043A\u043E\u043D\u043A\u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043E\u0432 \u0432 \u0443\u0433\u043B\u0430\u0445." }) }), _jsx("li", { children: _jsx(Typo, { size: "s", children: "\u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0438\u043A\u043E\u043D\u043A\u0443 \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0439 \u0441\u0430\u0439\u0434\u0431\u0430\u0440 \u0432\u043E \u0432\u0435\u0441\u044C \u044D\u043A\u0440\u0430\u043D." }) })] }), _jsx("div", { className: "h-[1000px] bg-secondary/10 flex items-center justify-center rounded-lg border-2 border-dashed border-secondary/20", children: _jsx(Typo, { color: "secondary", children: "\u0414\u043B\u0438\u043D\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u0434\u043B\u044F \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438 \u043F\u0440\u043E\u043A\u0440\u0443\u0442\u043A\u0438" }) })] }) })),
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",
@@ -32,6 +32,8 @@
     "@storybook/addon-vitest": "^10.2.7",
     "@storybook/react": "^10.2.7",
     "@storybook/react-vite": "^10.2.7",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "tailwindcss": "^3.4.19",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
@@ -53,7 +55,6 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "storybook": "^10.2.7",
-    "tailwindcss": "^3.4.19",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",