@vrobots/storybook 0.2.13 → 0.2.15

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.2.13",
+    "version": "0.2.15",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/Menu.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createListCollection, Listbox } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
 import { useSelectedColorSchema } from "../hooks/useSelectedColorSchema";
+import * as Icons from "react-icons/md";
 export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }, ref) => {
     const frameworks = React.useMemo(() => createListCollection({
         items: menuItems || [],
@@ -11,6 +12,6 @@ export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }, r
         const value = details.value[0];
         onClick?.(value);
     };
-    return (_jsxs(Listbox.Root, { collection: frameworks, value: [selected], onValueChange: handleValueChange, pt: 4, ref: ref, children: [!!label && _jsx(Listbox.Label, { pl: 5, children: label }), _jsx(Listbox.Content, { border: 0, bgColor: 'transparent', children: frameworks.items.map((framework, i) => (_jsx(Listbox.Item, { item: framework, pl: 4, pr: 4, ...([selected].includes(framework.value) ? selectedColorSchema : undefined), children: _jsx(Listbox.ItemText, { children: framework.label }) }, `${framework.label} ${i + 1}`))) })] }));
+    return (_jsxs(Listbox.Root, { collection: frameworks, value: [selected], onValueChange: handleValueChange, pt: 4, ref: ref, children: [!!label && _jsx(Listbox.Label, { pl: 5, children: label }), _jsx(Listbox.Content, { border: 0, bgColor: 'transparent', children: frameworks.items.map((framework, i) => (_jsxs(Listbox.Item, { item: framework, pl: 4, pr: 4, ...([selected].includes(framework.value) ? selectedColorSchema : undefined), children: [framework.icon && React.createElement(Icons[framework.icon], { style: { display: 'inline', marginRight: 8 } }), _jsx(Listbox.ItemText, { children: framework.label })] }, `${framework.label} ${i + 1}`))) })] }));
 });
 Menu.displayName = 'Menu';

package/dist/src/components/Sidebar.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { Box, IconButton } from "@chakra-ui/react";
-import { useColorMode } from "./ui/color-mode";
 import { LuMenu } from "react-icons/lu";
 import { motion } from "motion/react";
 import { useBreakpoint, useIsMobile } from "../hooks";
@@ -26,7 +25,6 @@ export const SidebarToggleButton = (props) => {
 };
 export const Sidebar = forwardRef((props, ref) => {
     const sidebar = useSidebar();
-    const { colorMode } = useColorMode();
     const breakpoint = useBreakpoint();
     const isMobile = useIsMobile();
     const [mounted, setMounted] = React.useState(false);

package/dist/src/components/ui/toaster.js

@@ -6,5 +6,9 @@ export const toaster = createToaster({
     pauseOnPageIdle: true,
 });
 export const Toaster = () => {
-    return (_jsx(Portal, { children: _jsx(ChakraToaster, { toaster: toaster, insetInline: { mdDown: "4" }, children: (toast) => (_jsxs(Toast.Root, { width: { md: "sm" }, children: [toast.type === "loading" ? (_jsx(Spinner, { size: "sm", color: "blue.solid" })) : (_jsx(Toast.Indicator, {})), _jsxs(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && (_jsx(Toast.Description, { children: toast.description }))] }), toast.action && (_jsx(Toast.ActionTrigger, { children: toast.action.label })), toast.closable && _jsx(Toast.CloseTrigger, {})] })) }) }));
+    return (_jsx(Portal, { children: _jsx(ChakraToaster, { toaster: toaster, insetInline: { mdDown: "4" }, children: (toast) => (_jsxs(Toast.Root, { width: { md: "sm" }, children: [toast.type === "loading" ? (_jsx(Spinner, { size: "sm", color: "blue.solid" })) : (_jsx(Toast.Indicator, {})), _jsxs(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && (_jsx(Toast.Description, { children: toast.description }))] }), toast.action && (_jsx(Toast.ActionTrigger, { children: toast.action.label })), toast.closable && (_jsx(Toast.CloseTrigger, { color: "fg", bg: "bg.muted", borderWidth: "1px", borderColor: "border.emphasized", _hover: { bg: "bg.emphasized" }, _focusVisible: {
+                            outline: "2px solid",
+                            outlineColor: "blue.400",
+                            outlineOffset: "2px",
+                        } }))] })) }) }));
 };

package/dist/src/hooks/useSelectedColorSchema.js

@@ -3,7 +3,7 @@ export const useSelectedColorSchema = (_color) => {
     const { colorMode } = useColorMode();
     return {
         color: 'neu.text',
-        bgColor: colorMode === 'light' ? 'neu.bg' : 'neu.surface',
+        bgColor: _color ? `${_color}.${colorMode === 'light' ? '500' : '200'}` : 'neu.bg',
         boxShadow: 'neuInset',
     };
 };

package/dist/src/stories/Sidebar.stories.d.ts

@@ -1,7 +1,9 @@
 import type { StoryObj } from '@storybook/react-vite';
+import * as Icons from 'react-icons/md';
 export declare const SIDEBAR_MENU: {
     label: string;
     value: string;
+    icon: keyof typeof Icons;
 }[];
 declare const meta: {
     title: string;

package/dist/src/stories/Sidebar.stories.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Sidebar, SidebarProvider } from '../components/Sidebar';
 import { Menu } from '../components/Menu';
 export const SIDEBAR_MENU = [
-    { label: 'Dashboard', value: 'dashboard' },
-    { label: 'Settings', value: 'settings' },
-    { label: 'Profile', value: 'profile' },
-    { label: 'Logout', value: 'logout' },
+    { label: 'Dashboard', value: 'dashboard', icon: 'MdDashboard' },
+    { label: 'Settings', value: 'settings', icon: 'MdSettings' },
+    { label: 'Profile', value: 'profile', icon: 'MdPerson' },
+    { label: 'Logout', value: 'logout', icon: 'MdLogout' },
 ];
 const meta = {
     title: 'Frame/Sidebar',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",