@visio-io/design-system 1.0.0 → 1.0.1

package/dist/style.css

@@ -1 +1 @@
-.button{transition:all .2s ease-in-out}.button:disabled{cursor:not-allowed}.borderRadiusNone{border-radius:0}.borderRadiusSmall{border-radius:4px}.borderRadiusMedium{border-radius:8px}.borderRadiusLarge{border-radius:16px}.borderRadiusRound{border-radius:50px}._button_1x96v_1{transition:all .2s ease-in-out}._button_1x96v_1:disabled{cursor:not-allowed}._borderRadiusNone_1x96v_8{border-radius:0}._borderRadiusSmall_1x96v_12{border-radius:4px}._borderRadiusMedium_1x96v_16{border-radius:8px}._borderRadiusLarge_1x96v_20{border-radius:16px}._borderRadiusRound_1x96v_24{border-radius:50px}
+._button_1x96v_1{transition:all .2s ease-in-out}._button_1x96v_1:disabled{cursor:not-allowed}._borderRadiusNone_1x96v_8{border-radius:0}._borderRadiusSmall_1x96v_12{border-radius:4px}._borderRadiusMedium_1x96v_16{border-radius:8px}._borderRadiusLarge_1x96v_20{border-radius:16px}._borderRadiusRound_1x96v_24{border-radius:50px}._filterButton_1w15j_1{border-radius:50px;text-transform:none;padding:16px 24px;font-size:16px;font-family:Roboto,sans-serif;font-weight:400;white-space:nowrap;min-height:56px;height:100%;display:flex;align-items:center;justify-content:center;border-color:#e1bee7;background-color:#fff;color:#49454f;box-shadow:0 1px 3px #0000001a}[data-mui-color-scheme=dark] ._filterButton_1w15j_1{border-color:#ce93d8;background-color:#1e1e1e;color:#ffffffde;box-shadow:0 1px 3px #0000004d}._filterButton_1w15j_1:hover{border-color:#ce93d8;background-color:#fff;box-shadow:0 2px 4px #00000026}[data-mui-color-scheme=dark] ._filterButton_1w15j_1:hover{border-color:#ba68c8;background-color:#2c2c2e;box-shadow:0 2px 4px #0006}._filterButton_1w15j_1:active{box-shadow:0 1px 2px #0000001a}[data-mui-color-scheme=dark] ._filterButton_1w15j_1:active{box-shadow:0 1px 2px #0000004d}._container_1hyey_1{display:flex;gap:8px;-webkit-user-select:none;user-select:none}._card_1hyey_7{display:flex;height:32px;justify-content:center;align-items:center;border-radius:8px;border:1px solid;padding:6px 16px 6px 8px;gap:8px}._icon_1hyey_18{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px}._icon_1hyey_18 svg{display:block;width:18px;height:18px}._text_1hyey_32{text-align:center;font-style:normal;white-space:nowrap}._container_tr03y_1{display:inline-flex;justify-content:center;align-items:center;gap:8px;-webkit-user-select:none;user-select:none}._zoomButton_tr03y_9{display:flex;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px!important;border:none!important}._icon_tr03y_20{width:24px!important;height:24px!important}._googleMap_j4y4m_1{width:100%;height:100%;min-height:400px;border-radius:8px;overflow:hidden;position:relative}._container_j4y4m_10{width:100%;min-height:400px;height:400px;position:relative;margin:0;padding:0;border-radius:8px;overflow:hidden}._errorContainer_j4y4m_21{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:400px;padding:20px;text-align:center;color:#d32f2f}._loadingContainer_j4y4m_33{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:400px}._mapSpot_m5paz_1{width:30px;height:30px;border-radius:100px;background-color:#79747e;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .2s ease,box-shadow .2s ease}._mapSpot_m5paz_1:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}._mapSpot_m5paz_1:active{transform:scale(1.05);box-shadow:0 1px 4px #0000004d}._mapSpot_m5paz_1:focus{outline:2px solid rgba(121,116,126,.5);outline-offset:2px}._count_m5paz_26{color:#fff;font-size:14px;font-weight:600;line-height:1;text-align:center}._searchBar_9glzl_1 .MuiOutlinedInput-root{border-radius:28px;padding-left:0;padding-right:0}._searchBar_9glzl_1 .MuiOutlinedInput-root fieldset,._searchBar_9glzl_1 .MuiOutlinedInput-root:hover fieldset,._searchBar_9glzl_1 .MuiOutlinedInput-root._Mui-focused_9glzl_12 fieldset{border:none}._searchBar_9glzl_1 input::-webkit-contacts-auto-fill-button,._searchBar_9glzl_1 input::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0}._searchBar_9glzl_1 input:-webkit-autofill,._searchBar_9glzl_1 input:-webkit-autofill:hover,._searchBar_9glzl_1 input:-webkit-autofill:focus,._searchBar_9glzl_1 input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px transparent inset!important;box-shadow:0 0 0 30px transparent inset!important;-webkit-text-fill-color:inherit!important;transition:background-color 5000s ease-in-out 0s}._searchBar_9glzl_1 input::-webkit-list-button,._searchBar_9glzl_1 input::-webkit-calendar-picker-indicator{display:none!important}._searchBar_9glzl_1 .MuiInputBase-input{padding:16px 19px;font-family:Roboto,sans-serif;font-size:16px}._searchBar_9glzl_1 .MuiInputBase-input::placeholder{opacity:1}._searchBar_9glzl_1 .MuiInputAdornment-root{margin:0}._searchBar_9glzl_1 .MuiInputAdornment-root svg{display:block}._searchBar_9glzl_1 .MuiInputAdornment-positionStart{margin-right:0}._searchBar_9glzl_1 .MuiInputAdornment-positionEnd{margin-left:0}._startIconContainer_9glzl_60{display:flex;align-items:center;justify-content:center;padding:16px 0 16px 19px;margin:0}._startIconContainer_9glzl_60 svg{display:block}._endIconContainer_9glzl_74{display:flex!important;align-items:center;justify-content:center;padding-right:19px;padding-left:0;margin:0;transition:transform .15s ease-in-out;-webkit-user-select:none;user-select:none;min-width:18px;min-height:18px;position:relative;z-index:1}._endIconContainer_9glzl_74 svg{display:block!important;width:18px!important;height:18px!important;transition:transform .15s ease-in-out;flex-shrink:0}._endIconContainer_9glzl_74:hover{opacity:.8}._endIconContainer_9glzl_74:active{transform:scale(.95)}._endIconContainer_9glzl_74:active svg{transform:scale(.9)}._endIconContainer_9glzl_74._clicked_9glzl_104{animation:_clickEffect_9glzl_1 .2s ease-in-out}._defaultIcon_9glzl_108{width:18px;height:18px}@keyframes _clickEffect_9glzl_1{0%{transform:scale(1)}50%{transform:scale(.85)}to{transform:scale(1)}}._container_1mb8b_1{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}._iconWrapper_1mb8b_11{position:relative;margin-bottom:16px}._icon_1mb8b_11{font-size:180px!important;opacity:.8}._title_1mb8b_21{font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}._subtitle_1mb8b_30{font-weight:600}._description_1mb8b_34{max-width:400px}._button_1mb8b_38{margin-top:16px;padding:12px 32px;border-radius:8px;background-color:#667eea}._button_1mb8b_38:hover{background-color:#5a6fd6}

package/dist/types/components/CountCard/CountCard.d.ts

@@ -0,0 +1,13 @@
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+export interface CountItem {
+    label: string;
+    count: number;
+    icon?: ReactNode;
+}
+export interface CountCardProps {
+    items: CountItem[];
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+export declare const CountCard: ({ items, className, sx }: CountCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CountCard/CountCard.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CountCard } from './CountCard';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof CountCard>;
+export default meta;
+type Story = StoryObj<typeof CountCard>;
+export declare const Default: Story;
+export declare const SingleItem: Story;
+export declare const TwoItems: Story;
+export declare const ThreeItems: Story;
+export declare const WithoutIcons: Story;
+export declare const LargeNumbers: Story;
+export declare const WithZero: Story;
+export declare const InContext: Story;
+export declare const MultipleCards: Story;
+export declare const CustomStyles: Story;

package/dist/types/components/CountCard/index.d.ts

@@ -0,0 +1,2 @@
+export { CountCard } from './CountCard';
+export type { CountCardProps, CountItem } from './CountCard';

package/dist/types/components/FilterButton/FilterButton.d.ts

@@ -0,0 +1,2 @@
+import { FilterButtonProps } from './types';
+export declare const FilterButton: import("react").ForwardRefExoticComponent<Omit<FilterButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FilterButton/FilterButton.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterButton } from './FilterButton';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof FilterButton>;
+export default meta;
+type Story = StoryObj<typeof FilterButton>;
+export declare const Default: Story;
+export declare const CustomText: Story;
+export declare const States: Story;
+export declare const WithIcon: Story;
+export declare const Interactive: Story;
+export declare const InContext: Story;
+export declare const MultipleButtons: Story;

package/dist/types/components/FilterButton/handlers.d.ts

@@ -0,0 +1,3 @@
+import { MouseEvent } from 'react';
+import { FilterButtonProps } from './types';
+export declare const createFilterButtonClickHandler: (onClick?: FilterButtonProps["onClick"]) => ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;

package/dist/types/components/FilterButton/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterButton } from './FilterButton';
+export type { FilterButtonProps } from './types';

package/dist/types/components/FilterButton/types.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps as MuiButtonProps } from '@mui/material';
+import { MouseEvent } from 'react';
+export interface FilterButtonProps extends Omit<MuiButtonProps, 'variant' | 'sx' | 'onClick'> {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/types/components/GoogleMap/GoogleMap.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GoogleMap } from './components/GoogleMap';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof GoogleMap>;
+export default meta;
+type Story = StoryObj<typeof GoogleMap>;
+export declare const Default: Story;
+export declare const WithMarkers: Story;
+export declare const DarkTheme: Story;
+export declare const CustomZoom: Story;
+export declare const CustomCenter: Story;
+export declare const NotConfigured: Story;

package/dist/types/components/GoogleMap/components/GoogleMap.d.ts

@@ -0,0 +1,5 @@
+import { GoogleMapProps } from '../types';
+export declare const GoogleMap: {
+    ({ center, zoom, className, children, apiKey, mapId, themeMode, options, onLoad, onError, }: GoogleMapProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/GoogleMap/components/MapContent.d.ts

@@ -0,0 +1,6 @@
+export declare const MapContent: {
+    ({ children }: {
+        children?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/types/components/GoogleMap/components/MapMarkers.d.ts

@@ -0,0 +1,5 @@
+import { MapMarkersProps } from '../types';
+export declare const MapMarkers: {
+    ({ spots, onSpotClick, zoomLevel }: MapMarkersProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/types/components/GoogleMap/context/GoogleMapContext.d.ts

@@ -0,0 +1,11 @@
+export interface GoogleMapContextValue {
+    isLoaded: boolean;
+    map: google.maps.Map | null;
+    zoomToPosition: (position: {
+        lat: number;
+        lng: number;
+    }, zoomLevel?: number) => void;
+}
+declare const GoogleMapContext: import("react").Context<GoogleMapContextValue | undefined>;
+export declare const useGoogleMapContext: () => GoogleMapContextValue;
+export { GoogleMapContext };

package/dist/types/components/GoogleMap/index.d.ts

@@ -0,0 +1,6 @@
+export { GoogleMap } from './components/GoogleMap';
+export { MapMarkers } from './components/MapMarkers';
+export { MapContent } from './components/MapContent';
+export type { GoogleMapProps, MapSpotData, MapMarkersProps, MapSpotProps } from './types';
+export { useGoogleMapContext } from './context/GoogleMapContext';
+export type { GoogleMapContextValue } from './context/GoogleMapContext';

package/dist/types/components/GoogleMap/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export interface GoogleMapProps {
+    center?: {
+        lat: number;
+        lng: number;
+    };
+    zoom?: number;
+    options?: google.maps.MapOptions;
+    className?: string;
+    children?: ReactNode;
+    onLoad?: (map: google.maps.Map) => void;
+    onError?: (error: Error) => void;
+    apiKey?: string;
+    mapId?: string;
+    themeMode?: 'light' | 'dark';
+}
+export interface MapSpotData {
+    lat: number;
+    lng: number;
+    count: number;
+    id: string | number;
+    addressText?: string;
+}
+export interface MapMarkersProps {
+    spots: MapSpotData[];
+    onSpotClick?: (spot: MapSpotData) => void;
+    zoomLevel?: number;
+}
+export interface MapSpotProps {
+    count: number;
+    addressText?: string;
+    className?: string;
+    onClick?: () => void;
+    sx?: SxProps<Theme>;
+}

package/dist/types/components/MapSpot/MapSpot.d.ts

@@ -0,0 +1,5 @@
+import { MapSpotProps } from '../GoogleMap/types';
+export declare const MapSpot: {
+    ({ count, addressText, className, onClick, sx }: MapSpotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/MapSpot/MapSpot.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MapSpot } from './MapSpot';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof MapSpot>;
+export default meta;
+type Story = StoryObj<typeof MapSpot>;
+export declare const Default: Story;
+export declare const WithTooltip: Story;
+export declare const LargeNumber: Story;
+export declare const Multiple: Story;
+export declare const Interactive: Story;

package/dist/types/components/MapSpot/index.d.ts

@@ -0,0 +1,2 @@
+export { MapSpot } from './MapSpot';
+export type { MapSpotProps } from '../GoogleMap/types';

package/dist/types/components/NotFoundContent/NotFoundContent.d.ts

@@ -0,0 +1,5 @@
+import { NotFoundContentProps } from './types';
+export declare const NotFoundContent: {
+    ({ onGoHome, buttonText, title, description, errorCode, className, }: NotFoundContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/NotFoundContent/NotFoundContent.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NotFoundContent } from './NotFoundContent';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof NotFoundContent>;
+export default meta;
+type Story = StoryObj<typeof NotFoundContent>;
+export declare const Default: Story;
+export declare const WithoutButton: Story;
+export declare const Customized: Story;

package/dist/types/components/NotFoundContent/index.d.ts

@@ -0,0 +1,2 @@
+export { NotFoundContent } from './NotFoundContent';
+export type { NotFoundContentProps } from './types';

package/dist/types/components/NotFoundContent/types.d.ts

@@ -0,0 +1,27 @@
+export interface NotFoundContentProps {
+    /**
+     * Handler chamado quando o botão "Voltar para o início" é clicado
+     * Se não fornecido, o botão não será exibido
+     */
+    onGoHome?: () => void;
+    /**
+     * Texto do botão (padrão: "Voltar para o início")
+     */
+    buttonText?: string;
+    /**
+     * Título da página (padrão: "Página não encontrada")
+     */
+    title?: string;
+    /**
+     * Descrição da página (padrão: "Desculpe, a página que você está procurando não existe ou foi movida para outro endereço.")
+     */
+    description?: string;
+    /**
+     * Código de erro (padrão: "404")
+     */
+    errorCode?: string;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+}

package/dist/types/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,2 @@
+import { SearchBarProps } from './types';
+export declare const SearchBar: import("react").ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/SearchBar/SearchBar.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchBar } from './SearchBar';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof SearchBar>;
+export default meta;
+type Story = StoryObj<typeof SearchBar>;
+export declare const Default: Story;
+export declare const CustomPlaceholder: Story;
+export declare const WithStartIcon: Story;
+export declare const WithEndIconClick: Story;
+export declare const WithCustomEndIcon: Story;
+export declare const Controlled: Story;
+export declare const States: Story;
+export declare const FullWidth: Story;
+export declare const InContext: Story;
+export declare const WithClear: Story;

package/dist/types/components/SearchBar/handlers.d.ts

@@ -0,0 +1,4 @@
+import { ChangeEvent } from 'react';
+import { SearchBarProps } from './types';
+export declare const createEndIconClickHandler: (onEndIconClick?: SearchBarProps["onEndIconClick"]) => () => void;
+export declare const createChangeHandler: (onChange?: SearchBarProps["onChange"]) => (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/dist/types/components/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchBar } from './SearchBar';
+export type { SearchBarProps } from './types';

package/dist/types/components/SearchBar/searchBarTheme.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material';
+export interface SearchBarThemeColors {
+    backgroundColor: string;
+    textColor: string;
+    iconColor: string;
+}
+export interface SearchBarThemeConfig {
+    borderRadius: string;
+    padding: {
+        horizontal: string;
+        vertical: string;
+    };
+    iconSize: {
+        width: number;
+        height: number;
+    };
+    animation: {
+        clickDuration: number;
+        transitionDuration: string;
+    };
+}
+export declare const searchBarLightColors: SearchBarThemeColors;
+export declare const searchBarDarkColors: SearchBarThemeColors;
+export declare const searchBarThemeConfig: SearchBarThemeConfig;
+export declare const getSearchBarThemeColors: (theme: Theme) => SearchBarThemeColors;

package/dist/types/components/SearchBar/types.d.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { ReactNode, ChangeEvent } from 'react';
+export interface SearchBarProps extends Omit<MuiTextFieldProps, 'variant' | 'InputProps' | 'InputLabelProps' | 'onChange'> {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    onEndIconClick?: () => void;
+    placeholder?: string;
+    value?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+}

package/dist/types/components/SearchBar/utils.d.ts

@@ -0,0 +1,8 @@
+import { Theme, SxProps } from '@mui/material';
+import { ReactElement } from 'react';
+import { SearchBarProps } from './types';
+export declare const getDefaultEndIcon: (iconColor: string) => ReactElement;
+export declare const getFinalEndIcon: (endIcon: SearchBarProps["endIcon"], iconColor: string) => ReactElement;
+export declare const getBaseStyles: (currentTheme: Theme) => SxProps<Theme>;
+export declare const combineSxStyles: (theme: Theme, sx?: SearchBarProps["sx"]) => SxProps<Theme>;
+export declare const getIconColor: (theme: Theme) => string;

package/dist/types/components/SidebarMenu/SidebarMenu.d.ts

@@ -0,0 +1,5 @@
+import { SidebarMenuProps } from './types';
+export declare const SidebarMenu: {
+    ({ items, isExpanded, className, onClick }: SidebarMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/SidebarMenu/SidebarMenu.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SidebarMenu } from './SidebarMenu';
+declare const meta: Meta<typeof SidebarMenu>;
+export default meta;
+type Story = StoryObj<typeof SidebarMenu>;
+export declare const Expanded: Story;
+export declare const Collapsed: Story;
+export declare const InContainer: Story;

package/dist/types/components/SidebarMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarMenu } from './SidebarMenu';
+export type { SidebarMenuProps, SidebarMenuItem, SidebarMenuSubItem } from './types';

package/dist/types/components/SidebarMenu/types.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent, ReactNode } from 'react';
+export type SidebarMenuSubItem = {
+    id: string;
+    label: string;
+    active?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type SidebarMenuItem = {
+    id: string;
+    icon: ReactNode;
+    label: string;
+    active?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    trailingIcon?: ReactNode;
+    submenu?: SidebarMenuSubItem[];
+};
+export interface SidebarMenuProps {
+    items: SidebarMenuItem[];
+    isExpanded?: boolean;
+    className?: string;
+    onClick?: (selection: {
+        item: SidebarMenuItem;
+        subItem?: SidebarMenuSubItem;
+    }) => void;
+}

package/dist/types/components/SidebarMenu/useSidebarMenu.d.ts

@@ -0,0 +1,19 @@
+import { SidebarMenuItem, SidebarMenuProps, SidebarMenuSubItem } from './types';
+type UseSidebarMenuParams = Pick<SidebarMenuProps, 'items' | 'isExpanded' | 'onClick'>;
+export declare const useSidebarMenu: ({ items, isExpanded, onClick }: UseSidebarMenuParams) => {
+    selectedItemId: string | null;
+    selectedSubItemId: string | null;
+    expandedItemId: string | null;
+    submenuAnchorEl: HTMLElement | null;
+    submenuItem: SidebarMenuItem | undefined;
+    submenuItems: SidebarMenuSubItem[];
+    getIsItemActive: (item: SidebarMenuItem) => boolean;
+    getIsSubItemActive: (subItem: SidebarMenuSubItem) => boolean;
+    shouldShowSubmenu: (item: SidebarMenuItem) => boolean;
+    handleItemClick: (item: SidebarMenuItem, event: React.MouseEvent<HTMLElement>) => void;
+    handleSubItemClick: (item: SidebarMenuItem, subItem: SidebarMenuSubItem, event: React.MouseEvent<HTMLElement>, options?: {
+        closeMenu?: boolean;
+    }) => void;
+    closeSubmenu: () => void;
+};
+export {};

package/dist/types/components/ZoomControls/ZoomControls.d.ts

@@ -0,0 +1,2 @@
+import { ZoomControlsProps } from './types';
+export declare const ZoomControls: ({ map, className, sx, zoomIncrement, minZoom, fallbackZoom, onFullscreen, }: ZoomControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ZoomControls/ZoomControls.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ZoomControls } from './ZoomControls';
+import '../../styles/index.scss';
+declare const meta: Meta<typeof ZoomControls>;
+export default meta;
+type Story = StoryObj<typeof ZoomControls>;
+export declare const Default: Story;
+export declare const WithoutMap: Story;

package/dist/types/components/ZoomControls/handlers.d.ts

@@ -0,0 +1,3 @@
+import { ZoomControlsMap, ZoomControlsProps } from './types';
+export declare const createZoomInHandler: (map: ZoomControlsMap | null | undefined, zoomIncrement?: NonNullable<ZoomControlsProps["zoomIncrement"]>, fallbackZoom?: NonNullable<ZoomControlsProps["fallbackZoom"]>) => () => void;
+export declare const createZoomOutHandler: (map: ZoomControlsMap | null | undefined, zoomIncrement?: NonNullable<ZoomControlsProps["zoomIncrement"]>, minZoom?: NonNullable<ZoomControlsProps["minZoom"]>, fallbackZoom?: NonNullable<ZoomControlsProps["fallbackZoom"]>) => () => void;

package/dist/types/components/ZoomControls/index.d.ts

@@ -0,0 +1,2 @@
+export { ZoomControls } from './ZoomControls';
+export type { ZoomControlsProps, ZoomControlsMap } from './types';

package/dist/types/components/ZoomControls/types.d.ts

@@ -0,0 +1,14 @@
+import { SxProps, Theme } from '@mui/material';
+export interface ZoomControlsMap {
+    getZoom: () => number | null | undefined;
+    setZoom: (zoom: number) => void;
+}
+export interface ZoomControlsProps {
+    map?: ZoomControlsMap | null;
+    className?: string;
+    sx?: SxProps<Theme>;
+    zoomIncrement?: number;
+    minZoom?: number;
+    fallbackZoom?: number;
+    onFullscreen?: () => void;
+}

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

@@ -1,2 +1,19 @@
 export { Button } from "./Button/Button";
 export type { ButtonProps } from "./Button/types";
+export { FilterButton } from "./FilterButton";
+export type { FilterButtonProps } from "./FilterButton/types";
+export { CountCard } from "./CountCard";
+export type { CountCardProps, CountItem } from "./CountCard";
+export { ZoomControls } from "./ZoomControls";
+export type { ZoomControlsProps, ZoomControlsMap } from "./ZoomControls/types";
+export { GoogleMap, MapMarkers, MapContent } from "./GoogleMap";
+export type { GoogleMapProps, MapSpotData, MapMarkersProps, MapSpotProps } from "./GoogleMap/types";
+export { useGoogleMapContext } from "./GoogleMap/context/GoogleMapContext";
+export type { GoogleMapContextValue } from "./GoogleMap/context/GoogleMapContext";
+export { MapSpot } from "./MapSpot";
+export { SearchBar } from "./SearchBar";
+export type { SearchBarProps } from "./SearchBar/types";
+export { NotFoundContent } from "./NotFoundContent";
+export type { NotFoundContentProps } from "./NotFoundContent/types";
+export { SidebarMenu } from "./SidebarMenu";
+export type { SidebarMenuProps, SidebarMenuItem, SidebarMenuSubItem } from "./SidebarMenu/types";

package/dist/types/index.d.ts

@@ -1,4 +1,6 @@
 import "./styles/index.scss";
 export { lightTheme, darkTheme, spacingScale } from "./theme/theme";
+export { VisioThemeProvider, useVisioTheme } from "./theme/VisioThemeProvider";
+export type { VisioThemeMode, VisioThemeProviderProps } from "./theme/VisioThemeProvider";
 export * from "./components";
 export * from "./styles/tokens";

package/dist/types/styles/tokens/spacing.d.ts

@@ -6,4 +6,5 @@ export declare const spacingTokens: {
     readonly lg: 16;
     readonly xl: 24;
     readonly xxl: 32;
+    readonly xxxl: 64;
 };

package/dist/types/theme/VisioThemeProvider.d.ts

@@ -0,0 +1,18 @@
+import { lightTheme } from './theme';
+export type VisioThemeMode = 'light' | 'dark';
+type VisioThemeContextValue = {
+    mode: VisioThemeMode;
+    setMode: (mode: VisioThemeMode) => void;
+    toggleMode: () => void;
+    theme: typeof lightTheme;
+};
+export type VisioThemeProviderProps = {
+    children: React.ReactNode;
+    defaultMode?: VisioThemeMode;
+    mode?: VisioThemeMode;
+    onModeChange?: (mode: VisioThemeMode) => void;
+    enableCssBaseline?: boolean;
+};
+export declare const VisioThemeProvider: ({ children, defaultMode, mode, onModeChange, enableCssBaseline, }: VisioThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useVisioTheme: () => VisioThemeContextValue;
+export {};

package/dist/types/theme/theme.d.ts

@@ -30,4 +30,5 @@ export declare const spacingScale: {
     readonly lg: 16;
     readonly xl: 24;
     readonly xxl: 32;
+    readonly xxxl: 64;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visio-io/design-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Visio Design System",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -36,6 +36,7 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/material": "^5.0.0",
+    "@vis.gl/react-google-maps": "^1.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -45,14 +46,19 @@
     "@storybook/addon-essentials": "^8.4.0",
     "@storybook/react": "^8.4.0",
     "@storybook/react-vite": "^8.4.0",
-    "storybook": "^8.4.0",
+    "@types/google.maps": "^3.58.1",
+    "@types/node": "^25.0.9",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "sass": "^1.77.0",
+    "storybook": "^8.4.0",
     "typescript": "^5.6.0",
     "vite": "^5.4.0"
   },
+  "dependencies": {
+    "@mui/icons-material": "^7.3.7"
+  },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "vite build && tsc -p tsconfig.build.json",

package/src/styles/tokens/spacing.ts

@@ -6,4 +6,5 @@ export const spacingTokens = {
   lg: 16,
   xl: 24,
   xxl: 32,
+  xxxl: 64,
 } as const;