@kkkarsss/ui 1.4.1 → 1.4.3

package/dist/ui/controls/date-input/date-input.js

@@ -21,5 +21,5 @@ export const DateInput = ({ value, onChange, label, placeholder, size = 'm', dis
                             e.preventDefault();
                             e.stopPropagation();
                             setIsOpen(!isOpen);
-                        } }) }) }), _jsx(Dropdown, { isOpen: isOpen, onClose: () => setIsOpen(false), anchorRef: containerRef, children: _jsx(DatePicker, { selected: selectedDate, onSelect: handleDateSelect }) })] }));
+                        } }) }) }), _jsx(Dropdown, { isOpen: isOpen, matchWidth: false, onClose: () => setIsOpen(false), anchorRef: containerRef, children: _jsx(DatePicker, { selected: selectedDate, onSelect: handleDateSelect }) })] }));
 };

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 @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 }))] }) }));
+    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, { justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0'), children: [children, widget && _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/dist/ui/layout/main-page-layout/main-page-layout.stories.js

@@ -1,6 +1,7 @@
 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 { useLayout } from '../../../providers';
 import { Block, Cell, CellsBlock, Typo } from '../../information';
 import { Flex } from '../flex/flex';
 import { Offset } from '../offset/offset';
@@ -14,14 +15,20 @@ const meta = {
     },
 };
 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 }] })] })] }));
+const LeftSidebarMock = () => {
+    const { closePanels } = useLayout();
+    return (_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, onClick: closePanels }), _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 }], onClick: closePanels }), _jsx(Cell, { title: _jsx(Typo, { children: "Tips" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Notes to your tasks and projects" }), accLeft: [{ icon: Newspaper }], onClick: closePanels }), _jsx(Cell, { title: _jsx(Typo, { children: "Calendar" }), description: _jsx(Typo, { size: 's', color: 'secondary', children: "Your routine and added tasks" }), accLeft: [{ icon: Calendar }], onClick: closePanels })] }) }));
+};
+const RightSidebarMock = () => {
+    const { closePanels } = useLayout();
+    return (_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 }], onClick: closePanels }) }), _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 }], onClick: closePanels }), _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 }], onClick: closePanels })] })] }));
+};
 export const Default = {
     args: {
         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" }) })] }) })),
+        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." }) }), _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.4.1",
+  "version": "1.4.3",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",