@carto/ps-react-ui 4.0.3-canary.0 → 4.1.0

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

@@ -0,0 +1,3 @@
+import { BasemapsUIProps } from './types';
+import { JSX } from 'react';
+export declare function BasemapsUI({ options, labels: _labels, position, selected, onChange, }: BasemapsUIProps): JSX.Element;

package/dist/types/components/basemaps/const.d.ts

@@ -0,0 +1,2 @@
+import { BasemapsUILabels } from './types';
+export declare const DEFAULT_BASEMAPS_LABELS: BasemapsUILabels;

package/dist/types/components/basemaps/group-wrapper.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare function GroupWrapper({ title, children, collapsed, }: {
+    title: string;
+    children: ReactNode;
+    collapsed?: boolean;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/components/basemaps/group.d.ts

@@ -0,0 +1,6 @@
+import { BasemapOption } from './types';
+export declare function Group({ values, selected, onChange, }: {
+    values: Omit<BasemapOption, 'group'>[];
+    selected: string | null | undefined;
+    onChange: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/basemaps/header.d.ts

@@ -0,0 +1,6 @@
+import { BasemapsUILabels } from './types';
+export declare function Header({ isMobile, labels, onChangeCollapsed, }: {
+    labels: BasemapsUILabels['header'];
+    isMobile?: boolean;
+    onChangeCollapsed: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/basemaps/styles.d.ts

@@ -0,0 +1,71 @@
+import { Theme } from '@mui/material';
+export declare const BASEMAPS_WIDTH = 288;
+export declare const styles: {
+    root: {
+        width: number;
+        overflow: "auto";
+    };
+    toggle: {
+        padding: ({ spacing }: Theme) => string;
+        img: {
+            width: string;
+            aspectRatio: "1 / 1";
+            borderRadius: ({ spacing }: Theme) => string;
+        };
+    };
+    header: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        padding: ({ spacing }: Theme) => string;
+        paddingInlineStart: ({ spacing }: Theme) => string;
+        position: "sticky";
+        top: number;
+        zIndex: number;
+        background: ({ palette }: Theme) => string;
+    };
+    groupWrapper: {
+        content: {
+            paddingInline: ({ spacing }: Theme) => string;
+            paddingBlock: ({ spacing }: Theme) => string;
+        };
+    };
+    group: {
+        display: "flex";
+        flexDirection: "row";
+        flexWrap: "wrap";
+        justifyContent: "space-between";
+        alignItems: "center";
+        gap: ({ spacing }: Theme) => string;
+        paddingInline: ({ spacing }: Theme) => string;
+        paddingBlock: ({ spacing }: Theme) => string;
+    };
+    item: {
+        container: {
+            display: "flex";
+            alignItems: "center";
+            flexDirection: "column";
+            gap: ({ spacing }: Theme) => string;
+            background: "transparent";
+            border: "none";
+            cursor: "pointer";
+            padding: number;
+            height: ({ spacing }: Theme) => string;
+            img: {
+                maxWidth: ({ spacing }: Theme) => string;
+                aspectRatio: "1 / 1";
+                borderRadius: ({ spacing }: Theme) => string;
+                border: "2px solid transparent";
+                '&:hover': {
+                    borderColor: ({ palette }: Theme) => string;
+                };
+                '&[data-active="true"]': {
+                    borderColor: ({ palette }: Theme) => string;
+                };
+            };
+        };
+        selected: {
+            color: ({ palette }: Theme) => string;
+        };
+    };
+};

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

@@ -0,0 +1,26 @@
+import { SxProps, Theme } from '@mui/material';
+export interface BasemapsUILabels {
+    toggle: {
+        title: string;
+    };
+    header: {
+        title: string;
+        actions: {
+            close: string;
+        };
+    };
+}
+export interface BasemapOption {
+    id: string;
+    label: string;
+    icon: string;
+    group?: string;
+}
+export interface BasemapsUIProps {
+    options: BasemapOption[];
+    labels?: BasemapsUILabels;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    selected: string | null | undefined;
+    sx?: SxProps<Theme>;
+    onChange: (id: string) => void;
+}

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

@@ -14,3 +14,5 @@ export type { ZoomControlProps } from './zoom-controls/types';
 export { ZoomControlsUI } from './zoom-controls/zoom-controls';
 export type { ListDataProps, DataItem } from './list-data/types';
 export { ListDataUI } from './list-data/list-data';
+export { BasemapsUI } from './basemaps/basemaps';
+export type { BasemapsUIProps } from './basemaps/types';

package/dist/types/components/measurement-tools/styles.d.ts

@@ -0,0 +1,81 @@
+import { Theme } from '@mui/material';
+import { CSSProperties } from 'react';
+export declare const styles: {
+    container: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "flex-start";
+        gap: ({ spacing }: Theme) => string;
+        overflow: "hidden";
+    };
+    actions: {
+        icon: {
+            width: ({ spacing }: Theme) => string;
+            height: ({ spacing }: Theme) => string;
+            borderRadius: number;
+            '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+                borderRadius: number;
+            };
+        };
+    };
+    options: {
+        menu: {
+            marginTop: ({ spacing }: Theme) => string;
+        };
+        icon: {
+            width: ({ spacing }: Theme) => string;
+        };
+        title: {
+            paddingX: ({ spacing }: Theme) => string;
+            paddingY: ({ spacing }: Theme) => string;
+        };
+        icons: {
+            color: ({ palette }: Theme) => string;
+        };
+        tag: {
+            borderRadius: ({ spacing }: Theme) => string;
+            border: "1px solid";
+            borderColor: ({ palette }: Theme) => string;
+            paddingX: ({ spacing }: Theme) => string;
+            color: ({ palette }: Theme) => string;
+            backgroundColor: ({ palette }: Theme) => string;
+        };
+        modal: {
+            toggle: {
+                boxShadow: "none";
+                backgroundColor: "#F8F9F9";
+                padding: ({ spacing }: Theme) => string;
+                marginTop: ({ spacing }: Theme) => string;
+                marginBottom: ({ spacing }: Theme) => string;
+                '.MuiToggleButtonGroup-grouped': ({ typography }: Theme) => CSSProperties;
+            };
+            subtitle: ({ typography, palette }: Theme) => CSSProperties;
+            optionsGroup: {
+                marginLeft: ({ spacing }: Theme) => string;
+                '.MuiTypography-root': ({ typography }: Theme) => CSSProperties;
+            };
+            title: {
+                display: "flex";
+                justifyContent: "space-between";
+                alignItems: "center";
+                padding: ({ spacing }: Theme) => string;
+            };
+            content: {
+                paddingX: ({ spacing }: Theme) => string;
+                minWidth: ({ spacing }: Theme) => string;
+            };
+            actions: {
+                paddingX: ({ spacing }: Theme) => string;
+            };
+        };
+    };
+    chip: {
+        chip: {
+            marginRight: ({ spacing }: Theme) => string;
+        };
+        disabled: {
+            opacity: ({ palette }: Theme) => number;
+        };
+    };
+};

package/dist/types/components/responsive-drawer/responsive-drawer.d.ts

@@ -0,0 +1,12 @@
+import { PopoverProps } from '@mui/material';
+import { ReactNode } from 'react';
+export declare function ResponsiveDrawer<T extends {
+    collapsed: boolean;
+    onChangeCollapsed: (collapsed: boolean) => void;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    slotProps?: PopoverProps['slotProps'];
+}>({ ref, children, collapsed, isMobile, position, sx, slotProps, onChangeCollapsed, }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> & Pick<PopoverProps, 'slotProps' | 'sx'> & {
+    ref: HTMLElement | null;
+    isMobile: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.0.3-canary.0",
+  "version": "4.1.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {