@vrobots/storybook 0.1.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/components';
+export * as utils from './src/utils';
+export * from './src/hooks';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './src/components';
+export * as utils from './src/utils';
+export * from './src/hooks';

package/dist/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "@vrobots/storybook",
+    "private": false,
+    "version": "0.1.0",
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsc -declaration",
+        "lint": "eslint .",
+        "storybook": "storybook dev -p 6006",
+        "pre-publish": "rimraf dist; npm run build"
+    },
+    "dependencies": {
+        "@chakra-ui/react": "^3.32.0",
+        "@emotion/react": "^11.14.0",
+        "@storybook/addon-themes": "^10.2.6",
+        "axios": "^1.13.4",
+        "motion": "^12.34.0",
+        "next-themes": "^0.4.6",
+        "owasp-password-strength-test": "^1.3.0",
+        "react": "^19.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-dnd-touch-backend": "^16.0.1",
+        "react-dom": "^19.2.0",
+        "react-icons": "^5.5.0"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^5.0.0",
+        "@eslint/js": "^9.39.1",
+        "@storybook/addon-a11y": "^10.2.6",
+        "@storybook/addon-docs": "^10.2.6",
+        "@storybook/addon-vitest": "^10.2.6",
+        "@storybook/react-vite": "^10.2.6",
+        "@types/node": "^24.10.1",
+        "@types/react": "^19.2.5",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.1",
+        "@vitest/browser-playwright": "^4.0.18",
+        "@vitest/coverage-v8": "^4.0.18",
+        "@vrobots/types": "^0.4.17",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "eslint-plugin-storybook": "^10.2.6",
+        "globals": "^16.5.0",
+        "playwright": "^1.58.1",
+        "rimraf": "^6.1.2",
+        "storybook": "^10.2.6",
+        "ts-node": "^10.9.2",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.4",
+        "vite": "^7.2.4",
+        "vitest": "^4.0.18"
+    }
+}

package/dist/src/components/AvatarIconMenu.d.ts

@@ -0,0 +1,8 @@
+import { IMenuItemsProps } from "./Menu";
+export interface IAvatarIconMenuProps {
+    src: string;
+    name: string;
+    menu: IMenuItemsProps[];
+}
+export declare const createMenuItem: (item: IMenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarIconMenu: ({ src, name, menu, }: IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/AvatarIconMenu.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Menu, Portal } from "@chakra-ui/react";
+export const createMenuItem = (item) => {
+    return (_jsx(Menu.Item, { value: item.value, children: item.label }));
+};
+export const AvatarIconMenu = ({ src, name, menu, }) => {
+    return (_jsxs(Menu.Root, { positioning: { placement: "right-end" }, children: [_jsx(Menu.Trigger, { rounded: "full", focusRing: "outside", children: _jsxs(Avatar.Root, { size: { base: 'xs', md: 'sm' }, children: [_jsx(Avatar.Fallback, { name: name }), _jsx(Avatar.Image, { src: src })] }) }), _jsx(Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Content, { children: menu.map((item) => createMenuItem(item)) }) }) })] }));
+};

package/dist/src/components/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { TColor } from "../types";
+export interface IBreadcrumb {
+    title: string;
+    nav?: string;
+    color?: TColor;
+}
+export interface BreadcrumbProps {
+    breadcrumbs?: IBreadcrumb[];
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Breadcrumbs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { HStack, Link, Text } from "@chakra-ui/react";
+import { useSelectedColorSchema } from "../hooks/useSelectedColorSchema";
+export const Breadcrumbs = React.forwardRef(({ breadcrumbs }, ref) => {
+    const { color } = useSelectedColorSchema('blue');
+    if (!!breadcrumbs) {
+        const crumbs = breadcrumbs.map(({ title, nav, color: itemColor }, key) => {
+            if (!!nav) {
+                return (_jsxs(HStack, { children: [_jsx(Link, { href: nav, color: itemColor || color, whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', truncate: true, children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
+            }
+            return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: color || 'gray.500', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
+        });
+        return (_jsx(HStack, { width: '100%', flex: `0 1 auto`, ref: ref, children: crumbs }));
+    }
+    return null;
+});
+Breadcrumbs.displayName = 'Breadcrumbs';

package/dist/src/components/Display.d.ts

@@ -0,0 +1,4 @@
+export interface IDisplayProps {
+    children?: React.ReactNode;
+}
+export declare const Display: import("react").ForwardRefExoticComponent<IDisplayProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/components/Display.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { forwardRef } from "react";
+export const Display = forwardRef((props, ref) => {
+    return (_jsx(Box, { ref: ref, height: 'inherit', width: '100%', children: props.children }));
+});
+Display.displayName = 'Display';

package/dist/src/components/Frame.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IHeaderProps } from "./Header";
+export interface IFrameProps {
+    children?: React.ReactNode;
+    headerProps: IHeaderProps;
+}
+export declare const Frame: React.ForwardRefExoticComponent<IFrameProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Frame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, HStack } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
+import { Display } from "./Display";
+export const Frame = forwardRef((props, ref) => {
+    const { headerProps, } = props;
+    const headerRef = React.useRef(null);
+    const sidebarRef = React.useRef(null);
+    const displayRef = React.useRef(null);
+    return (_jsxs(Box, { ref: ref, height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden', children: [_jsx(Header, { ...headerProps, ref: headerRef }), _jsxs(HStack, { gap: 0, flex: 12, alignItems: 'stretch', children: [_jsx(Sidebar, { ref: sidebarRef }), _jsx(Display, { ref: displayRef, children: props.children })] })] }));
+});
+Frame.displayName = 'Frame';

package/dist/src/components/Header.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IHeaderProps {
+    appName?: string;
+    logo: {
+        light: string;
+        dark: string;
+    };
+    menu: React.ReactNode | null;
+    version?: string | null;
+}
+export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Header.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultSystem, Grid, GridItem, Text } from '@chakra-ui/react';
+import { forwardRef } from 'react';
+import { Logo } from './Logo';
+import { useColorMode } from './ui/color-mode';
+export const Header = forwardRef(({ appName, logo, menu = null, version = null, }, ref) => {
+    const { colorMode } = useColorMode();
+    const selectedLogo = logo[colorMode];
+    const borderColors = { ...defaultSystem }._config.theme?.semanticTokens?.colors.border.DEFAULT.value;
+    const borderColor = colorMode === 'light' ? borderColors._light : borderColors._dark;
+    return (_jsxs(Grid, { id: 'header', width: '100%', position: 'relative', zIndex: 2, backgroundColor: colorMode === 'light' ? 'white' : 'black', borderBottom: `1px solid ${borderColor}`, templateColumns: {
+            base: 'repeat(12, 1fr)',
+        }, ref: ref, children: [_jsxs(GridItem, { colSpan: 6, pt: { base: '0', lg: '8px' }, pb: { base: '0', lg: '8px' }, children: [_jsx(Logo, { alt: appName, src: selectedLogo }), _jsx(Text, { position: 'absolute', fontSize: 'xx-small', bottom: 0, left: 0, ml: 1, color: 'gray.500', children: !!version && _jsxs("em", { children: ["v. ", version] }) })] }), _jsx(GridItem, { colSpan: 6, alignItems: 'center', justifyContent: 'flex-end', pr: 2, display: 'flex', children: menu })] }));
+});
+Header.displayName = 'Header';

package/dist/src/components/Logo.d.ts

@@ -0,0 +1,5 @@
+import { ImageProps } from "@chakra-ui/react";
+export interface ILogoProps extends ImageProps {
+    defaultPath?: string;
+}
+export declare const Logo: (props: ILogoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Logo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, Link } from "@chakra-ui/react";
+export const Logo = (props) => {
+    const imageProps = { ...props, defaultPath: undefined };
+    const { defaultPath } = props;
+    return (_jsx(Link, { href: defaultPath, style: { textDecoration: 'none' }, children: _jsx(Image, { height: { base: '40px', md: '60px' }, p: 2, ...imageProps }) }));
+};

package/dist/src/components/Menu.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface IMenuItemsProps {
+    label: string;
+    value: string;
+}
+export interface IMenuProps {
+    menuItems?: IMenuItemsProps[];
+    label?: string;
+    defaultSelected?: string[];
+    onClick?: (value: string[]) => void;
+}
+export declare const Menu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<unknown>>;

package/dist/src/components/Menu.js

@@ -0,0 +1,17 @@
+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";
+export const Menu = forwardRef(({ label, menuItems, defaultSelected = [], onClick, }) => {
+    const [value, setValue] = React.useState(defaultSelected);
+    const frameworks = React.useMemo(() => createListCollection({
+        items: menuItems || [],
+    }), [menuItems]);
+    const selectedColorSchema = useSelectedColorSchema('blue');
+    const handleValueChange = (details) => {
+        setValue(details.value);
+        onClick?.(details.value);
+    };
+    return (_jsxs(Listbox.Root, { collection: frameworks, value: value, onValueChange: handleValueChange, pt: 4, 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, ...(value.includes(framework.value) ? selectedColorSchema : undefined), children: _jsx(Listbox.ItemText, { children: framework.label }) }, `${framework.label} ${i + 1}`))) })] }));
+});
+Menu.displayName = 'Menu';

package/dist/src/components/Page.d.ts

@@ -0,0 +1,6 @@
+import { IBreadcrumb } from "./Breadcrumbs";
+export interface IPageProps {
+    breadcrumbs?: IBreadcrumb[];
+    children: React.ReactNode;
+}
+export declare const Page: ({ breadcrumbs, children }: IPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Page.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { Breadcrumbs } from "./Breadcrumbs";
+export const Page = ({ breadcrumbs, children }) => {
+    return (_jsxs(Box, { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden', minHeight: '100%', p: 4, children: [_jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx(Box, { flex: '1 1 auto', mt: !!breadcrumbs?.length ? 2 : 0, children: children })] }));
+};

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

@@ -0,0 +1,15 @@
+import { IconButtonProps } from "@chakra-ui/react";
+import React from "react";
+export interface ISidebarProps {
+    isOpen?: boolean;
+    menu?: React.ReactNode | null;
+    setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+    setMenu?: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
+    toggleSidebar?: () => void;
+    children?: React.ReactNode;
+}
+export declare const SidebarContext: React.Context<ISidebarProps>;
+export declare const SidebarProvider: React.FC<ISidebarProps>;
+export declare const useSidebar: () => ISidebarProps;
+export declare const SidebarToggleButton: React.FC<IconButtonProps>;
+export declare const Sidebar: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Sidebar.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, defaultSystem, IconButton } from "@chakra-ui/react";
+import { useColorMode } from "./ui/color-mode";
+import React, { forwardRef } from "react";
+import { LuMenu } from "react-icons/lu";
+import { motion } from "motion/react";
+import { useBreakpoint, useIsMobile } from "../hooks";
+const COLOR_GRAY_200 = '#e4e4e7';
+const COLOR_GRAY_800 = '#27272a';
+export const SidebarContext = React.createContext({});
+export const SidebarProvider = (props) => {
+    const [isOpen, setIsOpen] = React.useState(props?.isOpen || false);
+    const [menu, setMenu] = React.useState(props?.menu || null);
+    const toggleSidebar = () => setIsOpen(!isOpen);
+    React.useEffect(() => {
+        setIsOpen(props.isOpen || false);
+    }, [props.isOpen]);
+    React.useEffect(() => {
+        setMenu(props.menu || null);
+    }, [props.menu]);
+    return (_jsx(SidebarContext.Provider, { value: { ...props, isOpen, menu, setIsOpen, setMenu, toggleSidebar }, children: props.children }));
+};
+export const useSidebar = () => React.useContext(SidebarContext);
+export const SidebarToggleButton = (props) => {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx(IconButton, { onClick: toggleSidebar, position: 'absolute', bottom: 2, right: 2, zIndex: 3, variant: 'ghost', ...props, children: _jsx(LuMenu, {}) }));
+};
+export const Sidebar = forwardRef((props, ref) => {
+    const sidebar = useSidebar();
+    const { colorMode } = useColorMode();
+    const breakpoint = useBreakpoint();
+    const isMobile = useIsMobile();
+    const width = {
+        base: '100vw',
+        sm: '100vw',
+        md: '200px',
+        lg: '300px',
+        xl: '300px',
+        '2xl': '300px',
+    };
+    const open = {
+        initial: { width: '0' },
+        animate: { width: width[breakpoint || 'base'] },
+        transition: { duration: 0.2 }
+    };
+    const close = {
+        initial: { width: width[breakpoint || 'base'] },
+        animate: { width: '0' },
+        transition: { duration: 0.2 }
+    };
+    const action = sidebar.isOpen ? open : close;
+    const borderColors = { ...defaultSystem }._config.theme?.semanticTokens?.colors.border.DEFAULT.value;
+    const borderColor = colorMode === 'light' ? COLOR_GRAY_200 : COLOR_GRAY_800;
+    console.log(borderColor);
+    return (_jsx(SidebarContext.Provider, { value: sidebar, children: _jsx(motion.div, { style: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: '0 0 auto',
+                zIndex: 1,
+                overflow: 'hidden',
+                height: 'inherit',
+                borderRight: `1px solid ${borderColor}`,
+            }, ...action, ref: ref, children: _jsx(Box, { width: width[breakpoint || 'base'], children: sidebar.menu }) }) }));
+});
+Sidebar.displayName = 'Sidebar';

package/dist/src/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ui/color-mode';
+export * from './Breadcrumbs';
+export * from './Display';
+export * from './Frame';
+export * from './Header';
+export * from './Logo';
+export * from './Menu';
+export * from './Sidebar';

package/dist/src/components/index.js

@@ -0,0 +1,8 @@
+export * from './ui/color-mode';
+export * from './Breadcrumbs';
+export * from './Display';
+export * from './Frame';
+export * from './Header';
+export * from './Logo';
+export * from './Menu';
+export * from './Sidebar';

package/dist/src/components/ui/color-mode.d.ts

@@ -0,0 +1,21 @@
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react";
+import { ThemeProviderProps } from "next-themes";
+import * as React from "react";
+export interface ColorModeProviderProps extends ThemeProviderProps {
+}
+export declare function ColorModeProvider(props: ColorModeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ColorMode = "light" | "dark";
+export interface UseColorModeReturn {
+    colorMode: ColorMode;
+    setColorMode: (colorMode: ColorMode) => void;
+    toggleColorMode: () => void;
+}
+export declare function useColorMode(): UseColorModeReturn;
+export declare function useColorModeValue<T>(light: T, dark: T): T;
+export declare function ColorModeIcon(): import("react/jsx-runtime").JSX.Element;
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {
+}
+export declare const ColorModeButton: React.ForwardRefExoticComponent<ColorModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const LightMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const DarkMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/src/components/ui/color-mode.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
+import { ThemeProvider, useTheme } from "next-themes";
+import * as React from "react";
+import { LuMoon, LuSun } from "react-icons/lu";
+export function ColorModeProvider(props) {
+    return (_jsx(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props }));
+}
+export function useColorMode() {
+    const { resolvedTheme, setTheme, forcedTheme } = useTheme();
+    const colorMode = forcedTheme || resolvedTheme;
+    const toggleColorMode = () => {
+        setTheme(resolvedTheme === "dark" ? "light" : "dark");
+    };
+    return {
+        colorMode: colorMode,
+        setColorMode: setTheme,
+        toggleColorMode,
+    };
+}
+export function useColorModeValue(light, dark) {
+    const { colorMode } = useColorMode();
+    return colorMode === "dark" ? dark : light;
+}
+export function ColorModeIcon() {
+    const { colorMode } = useColorMode();
+    return colorMode === "dark" ? _jsx(LuMoon, {}) : _jsx(LuSun, {});
+}
+export const ColorModeButton = React.forwardRef(function ColorModeButton(props, ref) {
+    const { toggleColorMode } = useColorMode();
+    return (_jsx(ClientOnly, { fallback: _jsx(Skeleton, { boxSize: "9" }), children: _jsx(IconButton, { onClick: toggleColorMode, variant: "ghost", "aria-label": "Toggle color mode", size: "sm", ref: ref, ...props, css: {
+                _icon: {
+                    width: "5",
+                    height: "5",
+                },
+            }, children: _jsx(ColorModeIcon, {}) }) }));
+});
+export const LightMode = React.forwardRef(function LightMode(props, ref) {
+    return (_jsx(Span, { color: "fg", display: "contents", className: "chakra-theme light", colorPalette: "gray", colorScheme: "light", ref: ref, ...props }));
+});
+export const DarkMode = React.forwardRef(function DarkMode(props, ref) {
+    return (_jsx(Span, { color: "fg", display: "contents", className: "chakra-theme dark", colorPalette: "gray", colorScheme: "dark", ref: ref, ...props }));
+});

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useBreakpoint';
+export * from './useSelectedColorSchema';
+export * from './useIsMobile';

package/dist/src/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './useBreakpoint';
+export * from './useSelectedColorSchema';
+export * from './useIsMobile';

package/dist/src/hooks/useBreakpoint.d.ts

@@ -0,0 +1 @@
+export declare const useBreakpoint: () => string | undefined;

package/dist/src/hooks/useBreakpoint.js

@@ -0,0 +1,12 @@
+import { useBreakpointValue } from "@chakra-ui/react";
+export const useBreakpoint = () => {
+    const breakpoint = useBreakpointValue({
+        base: "base",
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+        xl: "xl",
+        "2xl": "2xl",
+    });
+    return breakpoint;
+};

package/dist/src/hooks/useIsMobile.d.ts

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

package/dist/src/hooks/useIsMobile.js

@@ -0,0 +1,6 @@
+import { useBreakpoint } from "./useBreakpoint";
+export const useIsMobile = () => {
+    const breakpoint = useBreakpoint();
+    const isMobile = ['base', 'sm'].includes(breakpoint);
+    return isMobile;
+};

package/dist/src/hooks/useSelectedColorSchema.d.ts

@@ -0,0 +1,5 @@
+import { TColor } from "../types";
+export declare const useSelectedColorSchema: (color: TColor) => {
+    color: string;
+    bgColor: string;
+};

package/dist/src/hooks/useSelectedColorSchema.js

@@ -0,0 +1,8 @@
+import { useColorMode } from "../components";
+export const useSelectedColorSchema = (color) => {
+    const { colorMode } = useColorMode();
+    return {
+        color: colorMode === 'light' ? `${color}.800` : `${color}.400`,
+        bgColor: colorMode === 'light' ? `${color}.200` : `${color}.800`,
+    };
+};

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IMenuItemsProps } from '../components';
+declare const meta: {
+    title: string;
+    component: ({ src, name, menu, }: import("../components/AvatarIconMenu").IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        name: string;
+        src: string;
+        menu: IMenuItemsProps[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/AvatarIconMenu.stories.js

@@ -0,0 +1,27 @@
+import { AvatarIconMenu } from '../components/AvatarIconMenu';
+const menu = [
+    { label: 'Account', value: 'account' },
+    { label: 'Settings', value: 'settings' },
+    { label: 'Logout', value: 'logout' },
+];
+const meta = {
+    title: 'Navigation/AvatarIconMenu',
+    component: AvatarIconMenu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        name: "Segun Adebayo",
+        src: "https://bit.ly/sage-adebayo",
+        menu,
+    }
+};
+export default meta;
+export const Component = {
+    args: {
+        name: "Segun Adebayo",
+        src: "https://bit.ly/sage-adebayo",
+        menu,
+    }
+};

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

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IBreadcrumb } from '../components/Breadcrumbs';
+export declare const EXAMPLE_BREADCRUMBS: IBreadcrumb[];
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").BreadcrumbProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;