@spothero/ui 25.11.0 → 25.15.0-beta.1

package/dist/components/Button/Button.styles.d.ts

@@ -78,6 +78,26 @@ export declare const variants: {
             readonly bg: string;
         };
     };
+    readonly iconSecondary: {
+        readonly bg: "white";
+        readonly borderColor: "gray.medium";
+        readonly color: "black";
+        readonly minW: "unset";
+        readonly px: 3;
+        readonly py: 3;
+        readonly _hover: {
+            readonly _disabled: {
+                bg: string;
+                borderColor: string;
+                color: string;
+            };
+            readonly bg: string;
+            readonly color: "black";
+        };
+        readonly _active: {
+            readonly bg: string;
+        };
+    };
     readonly secondaryOnDark: {
         readonly bg: "none";
         readonly borderColor: "white";
@@ -120,6 +140,32 @@ export declare const variants: {
             };
         };
     };
+    readonly iconTertiary: {
+        readonly bg: "none";
+        readonly borderWidth: "none";
+        readonly borderRadius: "unset";
+        readonly color: "black";
+        readonly h: "unset";
+        readonly m: "unset";
+        readonly minW: "unset";
+        readonly px: 2;
+        readonly py: 2;
+        readonly lineHeight: 1;
+        readonly _disabled: {
+            readonly bg: "none";
+            readonly color: "gray.dark";
+        };
+        readonly _hover: {
+            readonly _disabled: {
+                readonly color: "gray.dark";
+            };
+        };
+        readonly _active: {
+            readonly _disabled: {
+                readonly color: "gray.dark";
+            };
+        };
+    };
     readonly tertiaryOnDark: {
         readonly bg: "none";
         readonly borderRadius: "unset";

package/dist/components/Modal/AlwaysMountedModal.d.ts

@@ -0,0 +1,7 @@
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { ModalProps } from './Modal';
+export interface AlwaysMountedModalProps extends ModalProps {
+    onCloseComplete?: () => void;
+}
+declare const AlwaysMountedModal: ForwardRefComponent<HTMLDivElement, AlwaysMountedModalProps>;
+export default AlwaysMountedModal;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ModalOverlay, ModalContent, Modal as ChakraModal } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { ModalSize, ModalStyleProps } from './types';
+type ChakraModalProps = Omit<React.ComponentProps<typeof ChakraModal>, 'children' | 'size'>;
+type ModalContentProps = React.ComponentProps<typeof ModalContent>;
+type ModalOverlayProps = React.ComponentProps<typeof ModalOverlay>;
+export interface ModalProps extends ChakraModalProps, ModalStyleProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    size?: ModalSize;
+    isMobile?: boolean;
+    contentStyling?: ModalContentProps;
+    overlayProps?: ModalOverlayProps;
+}
+declare const Modal: ForwardRefComponent<HTMLDivElement, ModalProps>;
+export default Modal;

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

@@ -0,0 +1,3 @@
+export { ModalBody, ModalFooter, ModalHeader } from '@chakra-ui/react';
+export { default as Modal } from './Modal';
+export { default as AlwaysMountedModal } from './AlwaysMountedModal';

package/dist/components/Modal/styles/body.d.ts

@@ -1,8 +1,5 @@
-declare function _default({ hasFooter, hasHeader, hideCloseButton }: {
-    hasFooter: any;
-    hasHeader: any;
-    hideCloseButton: any;
-}): {
+import type { ModalStyleProps } from '../types';
+declare const body: ({ hasFooter, hasHeader, hideCloseButton }: ModalStyleProps) => {
     background: string;
     backgroundRepeat: string;
     backgroundColor: string;
@@ -27,4 +24,4 @@ declare function _default({ hasFooter, hasHeader, hideCloseButton }: {
     overflow: string;
     display: string;
 };
-export default _default;
+export default body;

package/dist/components/Modal/styles/closeButton.d.ts

@@ -1,6 +1,5 @@
-declare function _default({ hasHeader }: {
-    hasHeader: any;
-}): {
+import type { ModalStyleProps } from '../types';
+declare const closeButton: ({ hasHeader }: ModalStyleProps) => {
     position: string;
     top: number;
     insetEnd: number;
@@ -15,4 +14,4 @@ declare function _default({ hasHeader }: {
         bg: string;
     };
 };
-export default _default;
+export default closeButton;

package/dist/components/Modal/styles/dialog.d.ts

@@ -1,6 +1,5 @@
-declare function _default({ hasFooter }: {
-    hasFooter: any;
-}): {
+import type { ModalStyleProps } from '../types';
+declare const dialog: ({ hasFooter }: ModalStyleProps) => {
     borderRadius: string;
     borderBottomRadius: {
         base: string;
@@ -13,4 +12,4 @@ declare function _default({ hasFooter }: {
     boxShadow: string;
     paddingBottom: number;
 };
-export default _default;
+export default dialog;

package/dist/components/Modal/styles/dialogContainer.d.ts

@@ -1,12 +1,12 @@
-declare namespace _default {
-    let display: string;
-    let zIndex: string;
-    let justifyContent: string;
-    namespace alignItems {
-        let base: string;
-        let tablet: string;
-    }
-    let height: string;
-    let minHeight: string;
-}
-export default _default;
+declare const dialogContainer: {
+    readonly display: "flex";
+    readonly zIndex: "layer8";
+    readonly justifyContent: "center";
+    readonly alignItems: {
+        readonly base: "flex-end";
+        readonly tablet: "center";
+    };
+    readonly height: "100%";
+    readonly minHeight: "fill-available";
+};
+export default dialogContainer;

package/dist/components/Modal/styles/footer.d.ts

@@ -1,6 +1,12 @@
-declare namespace _default {
-    let borderTop: string;
-    let borderColor: string;
-    let padding: number;
-}
-export default _default;
+declare const footer: {
+    readonly borderTop: "1px";
+    readonly borderColor: "gray.100";
+    readonly padding: 4;
+    readonly gap: 4;
+    readonly justifyContent: "flex-start";
+    readonly flexDirection: {
+        readonly base: "column";
+        readonly desktop: "row-reverse";
+    };
+};
+export default footer;

package/dist/components/Modal/styles/header.d.ts

@@ -1,10 +1,8 @@
-declare function _default({ hideCloseButton, hasHeader }: {
-    hideCloseButton: any;
-    hasHeader: any;
-}): {
+import type { ModalStyleProps } from '../types';
+declare const header: ({ hideCloseButton, hasHeader }: ModalStyleProps) => {
     padding: number;
     fontSize: string;
     fontWeight: string;
-    minHeight: number | null;
+    minHeight: number | undefined;
 };
-export default _default;
+export default header;

package/dist/components/Modal/styles/index.d.ts

@@ -1,227 +1,4 @@
-declare const _default: {
-    baseStyle?: ((props: import("@chakra-ui/react").StyleFunctionProps) => {
-        overlay: {
-            bg: string;
-            zIndex: string;
-        };
-        dialogContainer: {
-            display: string;
-            zIndex: string;
-            justifyContent: string;
-            alignItems: string;
-            overflow: string;
-            overscrollBehaviorY: string;
-        };
-        dialog: {
-            [x: string]: string | {
-                [x: string]: string;
-            } | undefined;
-            borderRadius: string;
-            color: string;
-            my: string;
-            mx: string | undefined;
-            zIndex: string;
-            maxH: string | undefined;
-            _dark: {
-                [x: string]: string;
-            };
-            bg: string;
-            boxShadow: string;
-        };
-        header: {
-            px: string;
-            py: string;
-            fontSize: string;
-            fontWeight: string;
-        };
-        closeButton: {
-            position: string;
-            top: string;
-            insetEnd: string;
-        };
-        body: {
-            px: string;
-            py: string;
-            flex: string;
-            overflow: string | undefined;
-        };
-        footer: {
-            px: string;
-            py: string;
-        };
-    }) | undefined;
-    sizes?: {
-        xs: {
-            dialog: {
-                maxW: string;
-            };
-        };
-        sm: {
-            dialog: {
-                maxW: string;
-            };
-        };
-        md: {
-            dialog: {
-                maxW: string;
-            };
-        };
-        lg: {
-            dialog: {
-                maxW: string;
-            };
-        };
-        xl: {
-            dialog: {
-                maxW: string;
-            };
-        };
-        "2xl": {
-            dialog: {
-                maxW: string;
-            };
-        };
-        "3xl": {
-            dialog: {
-                maxW: string;
-            };
-        };
-        "4xl": {
-            dialog: {
-                maxW: string;
-            };
-        };
-        "5xl": {
-            dialog: {
-                maxW: string;
-            };
-        };
-        "6xl": {
-            dialog: {
-                maxW: string;
-            };
-        };
-        full: {
-            dialog: {
-                maxW: string;
-            };
-        };
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("overlay" | "dialogContainer" | "dialog" | "header" | "closeButton" | "body" | "footer")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: "md" | "full" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("overlay" | "dialogContainer" | "dialog" | "header" | "closeButton" | "body" | "footer")[];
-} & {
-    baseStyle: (props: any) => {
-        overlay: {
-            background: string;
-            zIndex: string;
-        };
-        dialogContainer: {
-            display: string;
-            zIndex: string;
-            justifyContent: string;
-            alignItems: {
-                base: string;
-                tablet: string;
-            };
-            height: string;
-            minHeight: string;
-        };
-        header: {
-            padding: number;
-            fontSize: string;
-            fontWeight: string;
-            minHeight: number | null;
-        };
-        dialog: {
-            borderRadius: string;
-            borderBottomRadius: {
-                base: string;
-                tablet: string;
-            };
-            background: string;
-            color: string;
-            marginY: number;
-            zIndex: string;
-            boxShadow: string;
-            paddingBottom: number;
-        };
-        closeButton: {
-            position: string;
-            top: number;
-            insetEnd: number;
-            color: string;
-            borderRadius: string;
-            width: number;
-            height: number;
-            _focus: {
-                boxShadow: string;
-            };
-            _hover: {
-                bg: string;
-            };
-        };
-        body: {
-            background: string;
-            backgroundRepeat: string;
-            backgroundColor: string;
-            backgroundSize: string;
-            backgroundAttachment: string;
-            borderBottomRadius: string | null;
-            paddingX: number;
-            paddingBottom: number;
-            flex: number;
-            overflow: string;
-            display: string;
-        } | {
-            background?: undefined;
-            backgroundRepeat?: undefined;
-            backgroundColor?: undefined;
-            backgroundSize?: undefined;
-            backgroundAttachment?: undefined;
-            borderBottomRadius: string | null;
-            paddingX: number;
-            paddingBottom: number;
-            flex: number;
-            overflow: string;
-            display: string;
-        };
-        footer: {
-            borderTop: string;
-            borderColor: string;
-            padding: number;
-        };
-    };
-    sizes: {
-        sm: {
-            dialog: {
-                maxWidth: string[];
-                maxHeight: string[];
-                minHeight: string[];
-            };
-        };
-        md: {
-            dialog: {
-                maxWidth: string[];
-                maxHeight: string[];
-                minHeight: string[];
-            };
-        };
-        lg: {
-            dialog: {
-                maxWidth: string[];
-                maxHeight: string[];
-                minHeight: string[];
-            };
-        };
-    };
-};
-export default _default;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+type ModalStyle = NonNullable<typeof chakraDefaultTheme.components.Modal>;
+declare const modalStyle: ModalStyle;
+export default modalStyle;

package/dist/components/Modal/styles/overlay.d.ts

@@ -1,5 +1,5 @@
-declare namespace _default {
-    let background: string;
-    let zIndex: string;
-}
-export default _default;
+declare const overlay: {
+    readonly background: "modalOverlay";
+    readonly zIndex: "layer8";
+};
+export default overlay;

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

@@ -0,0 +1,6 @@
+export type ModalSize = 'sm' | 'sm-md' | 'md' | 'lg' | 'full';
+export interface ModalStyleProps {
+    hasHeader?: boolean;
+    hasFooter?: boolean;
+    hideCloseButton?: boolean;
+}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Popover as ChakraPopover } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { PopoverVariant } from './types';
+export interface PopoverProps extends React.ComponentProps<typeof ChakraPopover> {
+    children?: React.ReactNode;
+    variant?: PopoverVariant;
+}
+declare const Popover: ForwardRefComponent<HTMLDivElement, PopoverProps>;
+export default Popover;

package/dist/components/Popover/PopoverArrow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopoverArrow as ChakraPopoverArrow } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { PopoverVariantProps } from './types';
+export type PopoverArrowProps = React.ComponentProps<typeof ChakraPopoverArrow> & PopoverVariantProps;
+declare const PopoverArrow: ForwardRefComponent<HTMLDivElement, PopoverArrowProps>;
+export default PopoverArrow;

package/dist/components/Popover/PopoverCloseButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopoverCloseButton as ChakraPopoverCloseButton } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { PopoverVariantProps } from './types';
+type PopoverCloseButtonProps = React.ComponentProps<typeof ChakraPopoverCloseButton> & PopoverVariantProps;
+declare const PopoverCloseButton: ForwardRefComponent<HTMLButtonElement, PopoverCloseButtonProps>;
+export default PopoverCloseButton;

package/dist/components/Popover/PopoverContent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PopoverBody, PopoverContent as ChakraPopoverContent } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import type { PopoverVariant } from './types';
+type PopoverBodyProps = React.ComponentProps<typeof PopoverBody>;
+export type PopoverContentProps = React.ComponentProps<typeof ChakraPopoverContent> & {
+    children?: React.ReactNode;
+    hideCloseButton?: boolean;
+    hideArrow?: boolean;
+    variant?: PopoverVariant;
+    header?: React.ReactNode;
+    popoverBodyProps?: PopoverBodyProps;
+};
+declare const PopoverContent: ForwardRefComponent<HTMLDivElement, PopoverContentProps>;
+export default PopoverContent;

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

@@ -0,0 +1,4 @@
+export { PopoverTrigger, PopoverAnchor } from '@chakra-ui/react';
+export { default as Popover } from './Popover';
+export { default as PopoverContent } from './PopoverContent';
+export { default as PopoverArrow } from './PopoverArrow';

package/dist/components/Popover/styles/index.d.ts

@@ -1,100 +1,4 @@
-declare const _default: {
-    baseStyle?: {
-        popper: {
-            zIndex: number;
-        };
-        content: {
-            [x: string]: string | {
-                [x: string]: string;
-                outline?: undefined;
-                boxShadow?: undefined;
-            } | {
-                outline: number;
-                boxShadow: string;
-            };
-            bg: string;
-            _dark: {
-                [x: string]: string;
-            };
-            width: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
-            boxShadow: string;
-            zIndex: string;
-            _focusVisible: {
-                outline: number;
-                boxShadow: string;
-            };
-        };
-        header: {
-            px: number;
-            py: number;
-            borderBottomWidth: string;
-        };
-        body: {
-            px: number;
-            py: number;
-        };
-        footer: {
-            px: number;
-            py: number;
-            borderTopWidth: string;
-        };
-        closeButton: {
-            position: string;
-            borderRadius: string;
-            top: number;
-            insetEnd: number;
-            padding: number;
-        };
-    } | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("content" | "header" | "closeButton" | "body" | "footer" | "popper" | "arrow")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("content" | "header" | "closeButton" | "body" | "footer" | "popper" | "arrow")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("content" | "header" | "closeButton" | "body" | "footer" | "popper" | "arrow")[];
-} & {
-    parts: string[];
-    baseStyle: (props: any) => {
-        header: {
-            marginBottom: number;
-            fontWeight: string;
-        };
-        content: {
-            padding: number;
-            marginBottom: number;
-            maxWidth: string;
-            borderRadius: string;
-            background: string;
-            boxShadow: string;
-            color: string;
-            borderColor: string;
-            borderWidth: string;
-            borderStyle: string;
-            '--popper-arrow-shadow-color': (t: any) => any;
-            zIndex: string;
-            _focusVisible: {
-                outline: string;
-            };
-        };
-        body: {
-            fontSize: string;
-        };
-        popper: {
-            borderRadius: string;
-        };
-    };
-};
-export default _default;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+type PopoverStyle = NonNullable<typeof chakraDefaultTheme.components.Popover>;
+declare const popoverStyle: PopoverStyle;
+export default popoverStyle;

package/dist/components/Popover/styles/popover-arrow.d.ts

@@ -0,0 +1,5 @@
+import type { PopoverVariantProps } from '../types';
+declare const arrowStyles: ({ variant }: PopoverVariantProps) => {
+    backgroundColor: string;
+};
+export default arrowStyles;

package/dist/components/Popover/styles/popover-body.d.ts

@@ -1,4 +1,5 @@
-export default body;
-declare function body(props: any): {
+import type { PopoverVariantProps } from '../types';
+declare const body: (_props: PopoverVariantProps) => {
     fontSize: string;
 };
+export default body;

package/dist/components/Popover/styles/popover-close-button.d.ts

@@ -0,0 +1,18 @@
+import type { PopoverVariantProps } from '../types';
+declare const closeButtonStyles: ({ variant }: PopoverVariantProps) => {
+    color: string;
+    fontSize: string;
+    position: "absolute";
+    top: number;
+    right: number;
+    padding: number;
+    borderTopRightRadius: number;
+    _hover: {
+        bgColor: string;
+    };
+    _focus: {
+        boxShadow: string;
+        bgColor: string;
+    };
+};
+export default closeButtonStyles;

package/dist/components/Popover/styles/popover-content.d.ts

@@ -1,7 +1,5 @@
-export default popoverContentStyles;
-declare function popoverContentStyles({ variant }: {
-    variant: any;
-}): {
+import type { PopoverVariantProps } from '../types';
+declare const popoverContentStyles: ({ variant }: PopoverVariantProps) => {
     padding: number;
     marginBottom: number;
     maxWidth: string;
@@ -12,9 +10,14 @@ declare function popoverContentStyles({ variant }: {
     borderColor: string;
     borderWidth: string;
     borderStyle: string;
-    '--popper-arrow-shadow-color': (t: any) => any;
+    '--popper-arrow-shadow-color': (t: {
+        colors: {
+            gray: Record<string, string>;
+        };
+    }) => string;
     zIndex: string;
     _focusVisible: {
         outline: string;
     };
 };
+export default popoverContentStyles;