@spothero/ui 25.6.0 → 25.12.0

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { ButtonGroup } from '@chakra-ui/react';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
+export type CheckboxProps = Omit<React.ComponentProps<typeof ChakraCheckbox>, 'size'> & {
+    /** Optional helper text displayed below the checkbox */
+    helperText?: string;
+    /** The size of the checkbox */
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

@@ -0,0 +1 @@
+export { default } from './Checkbox';

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

@@ -1,200 +1,4 @@
-declare const _default: {
-    baseStyle?: ((props: import("@chakra-ui/react").StyleFunctionProps) => {
-        icon: {
-            transitionProperty: string;
-            transitionDuration: string;
-        };
-        container: {
-            _disabled: {
-                cursor: string;
-            };
-        };
-        control: {
-            w: string;
-            h: string;
-            transitionProperty: string;
-            transitionDuration: string;
-            border: string;
-            borderRadius: string;
-            borderColor: string;
-            color: string;
-            _checked: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                _hover: {
-                    bg: string;
-                    borderColor: string;
-                };
-                _disabled: {
-                    borderColor: string;
-                    bg: string;
-                    color: string;
-                };
-            };
-            _indeterminate: {
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            _disabled: {
-                bg: string;
-                borderColor: string;
-            };
-            _focusVisible: {
-                boxShadow: string;
-            };
-            _invalid: {
-                borderColor: string;
-            };
-        };
-        label: {
-            userSelect: string;
-            _disabled: {
-                opacity: number;
-            };
-        };
-    }) | undefined;
-    sizes?: {
-        sm: {
-            control: {
-                [x: string]: string;
-            };
-            label: {
-                fontSize: string;
-            };
-            icon: {
-                fontSize: string;
-            };
-        };
-        md: {
-            control: {
-                [x: string]: string;
-            };
-            label: {
-                fontSize: string;
-            };
-            icon: {
-                fontSize: string;
-            };
-        };
-        lg: {
-            control: {
-                [x: string]: string;
-            };
-            label: {
-                fontSize: string;
-            };
-            icon: {
-                fontSize: string;
-            };
-        };
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "icon" | "label" | "control")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: "md" | "sm" | "lg" | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("container" | "icon" | "label" | "control")[];
-} & {
-    baseStyle: {
-        container: {
-            _disabled: {
-                cursor: string;
-            };
-        };
-        control: {
-            borderWidth: number;
-            borderStyle: string;
-            borderImage: string;
-            borderRadius: string;
-            borderColor: string;
-            transition: string;
-            marginTop: number;
-            _readOnly: {
-                boxShadow: string;
-                userSelect: string;
-            };
-            _disabled: {
-                cursor: string;
-                userSelect: string;
-                borderColor: string;
-            };
-            _focus: {
-                zIndex: number;
-                boxShadow: string;
-            };
-            _checked: {
-                borderColor: string;
-                backgroundColor: string;
-                _hover: {
-                    borderColor: string;
-                    backgroundColor: string;
-                };
-                _disabled: {
-                    borderColor: string;
-                    backgroundColor: string;
-                };
-            };
-            '& svg': {
-                filter: string;
-            };
-        };
-        label: {
-            _disabled: {
-                color: string;
-                cursor: string;
-            };
-        };
-        icon: {
-            color: string;
-        };
-    };
-    sizes: {
-        sm: {
-            control: {
-                marginTop: string;
-                width: number;
-                height: number;
-            };
-            icon: {
-                width: number;
-                height: number;
-            };
-        };
-        md: {
-            control: {
-                marginTop: number;
-                width: number;
-                height: number;
-            };
-            icon: {
-                width: number;
-                height: number;
-            };
-            label: {
-                fontSize: string;
-            };
-        };
-        lg: {
-            control: {
-                marginTop: number;
-                width: number;
-                height: number;
-            };
-            icon: {
-                width: number;
-                height: number;
-            };
-            label: {
-                fontSize: string;
-            };
-        };
-    };
-};
-export default _default;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+type CheckboxStyle = NonNullable<typeof chakraDefaultTheme.components.Checkbox>;
+declare const checkboxStyle: CheckboxStyle;
+export default checkboxStyle;

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

@@ -1,3 +1,4 @@
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
 export declare const colorScheme: {
     low: {
         borderColor: string;
@@ -6,35 +7,8 @@ export declare const colorScheme: {
         borderColor: string;
     };
 };
-declare const _default: {
-    baseStyle?: {
-        opacity: number;
-        borderColor: string;
-    } | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
-    } | undefined;
-    variants?: {
-        solid: {
-            borderStyle: string;
-        };
-        dashed: {
-            borderStyle: string;
-        };
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: "dashed" | "solid" | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-} & {
-    colorScheme: {
-        low: {
-            borderColor: string;
-        };
-        medium: {
-            borderColor: string;
-        };
-    };
+type DividerStyle = NonNullable<typeof chakraDefaultTheme.components.Divider> & {
+    colorScheme: typeof colorScheme;
 };
-export default _default;
+declare const dividerStyle: DividerStyle;
+export default dividerStyle;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerHeader, type DrawerProps as ChakraDrawerProps } from '@chakra-ui/react';
+export interface DrawerProps extends Omit<ChakraDrawerProps, 'children'> {
+    children: React.ReactNode;
+    header?: React.ReactNode;
+    drawerCloseButton?: React.ReactNode;
+    headerProps?: React.ComponentProps<typeof DrawerHeader>;
+}
+declare const Drawer: ({ header, drawerCloseButton, children, headerProps, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default Drawer;

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

@@ -0,0 +1,2 @@
+export { Drawer as DrawerContainer, DrawerBody, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from '@chakra-ui/react';
+export { default as Drawer } from './Drawer';

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

@@ -1,149 +1,4 @@
-declare const _default: {
-    baseStyle?: ((props: import("@chakra-ui/react").StyleFunctionProps) => {
-        overlay: {
-            bg: string;
-            zIndex: string;
-        };
-        dialogContainer: {
-            display: string;
-            zIndex: string;
-            justifyContent: string;
-        };
-        dialog: any;
-        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;
-        };
-        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;
-            };
-        };
-        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" | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("overlay" | "dialogContainer" | "dialog" | "header" | "closeButton" | "body" | "footer")[];
-} & {
-    defaultProps: {
-        size: string;
-    };
-    baseStyle: (props: any) => {
-        body: {
-            overflowY: string;
-            padding: number;
-            paddingBottom: number;
-        };
-        footer: {
-            padding: number;
-            backgroundColor: string;
-            position: string;
-            bottom: number;
-            width: string;
-        };
-        header: {
-            paddingY: number;
-            paddingX: number;
-            borderBottom: string;
-            borderBottomColor: string;
-            display: string;
-            gridGap: number;
-            alignItems: string;
-            justifyContent: string;
-            fontWeight: string;
-        };
-        dialog: {
-            backgroundColor: string;
-            boxShadow: string;
-        };
-        closeButton: {
-            width: number;
-            height: number;
-            fontSize: string;
-            background: string;
-            borderRadius: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            flexShrink: number;
-            transitionProperty: string;
-            transitionDuration: string;
-            outline: string;
-            outlineOffset: string;
-            color: string;
-            _hover: {
-                color: string;
-                background: string;
-            };
-            _focus: {
-                outlineColor: string;
-            };
-        };
-        dialogContainer: {
-            zIndex: string;
-            backgroundColor: string;
-        };
-    };
-    sizes: {
-        xs: {
-            dialog: {
-                maxWidth: {
-                    base: string;
-                    mobileXL: number;
-                };
-            };
-        };
-    };
-};
-export default _default;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+type DrawerStyle = NonNullable<typeof chakraDefaultTheme.components.Drawer>;
+declare const drawerStyle: DrawerStyle;
+export default drawerStyle;

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Grid as ChakraGrid } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+export type GridProps = React.ComponentProps<typeof ChakraGrid> & {
+    /** This will reduce the grid gap by half */
+    isCompact?: boolean;
+    children?: React.ReactNode;
+};
+declare const Grid: ForwardRefComponent<HTMLDivElement, GridProps>;
+export default Grid;

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

@@ -0,0 +1,10 @@
+export declare const baseStyles: {
+    readonly gap: {
+        readonly base: 4;
+        readonly tablet: 8;
+    };
+    readonly templateColumns: "repeat(12, 1fr)";
+};
+export declare const compactStyles: {
+    readonly gap: 4;
+};

package/dist/components/Grid/GridItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GridItem as ChakraGridItem } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+export type GridItemProps = React.ComponentProps<typeof ChakraGridItem> & {
+    children?: React.ReactNode;
+};
+declare const GridItem: ForwardRefComponent<HTMLDivElement, GridItemProps>;
+export default GridItem;

package/dist/components/Grid/GridItem.styles.d.ts

@@ -1,4 +1,4 @@
+declare const styles: {
+    readonly colSpan: 12;
+};
 export default styles;
-declare namespace styles {
-    let colSpan: number;
-}

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HeadingProps as ChakraHeadingProps } from '@chakra-ui/react';
+import { HeadingVariant } from './Heading.styles';
+export interface HeadingProps extends Omit<ChakraHeadingProps, 'as' | 'variant'> {
+    as?: HeadingVariant;
+    variant?: HeadingVariant;
+}
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export default Heading;

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

@@ -1,66 +1,13 @@
-export namespace variants {
-    namespace h1 {
-        namespace fontSize {
-            let base: "2rem";
-            let desktop: "2.5rem";
-        }
-        let lineHeight: number;
-        let fontWeight: 600;
-    }
-    namespace h2 {
-        export namespace fontSize_1 {
-            let base_1: "1.5rem";
-            export { base_1 as base };
-            let desktop_1: "2rem";
-            export { desktop_1 as desktop };
-        }
-        export { fontSize_1 as fontSize };
-    }
-    namespace h3 {
-        export namespace fontSize_2 {
-            let base_2: "1.25rem";
-            export { base_2 as base };
-            let desktop_2: "1.5rem";
-            export { desktop_2 as desktop };
-        }
-        export { fontSize_2 as fontSize };
-    }
-    namespace h4 {
-        export namespace fontSize_3 {
-            let base_3: "1rem";
-            export { base_3 as base };
-            let desktop_3: "1.25rem";
-            export { desktop_3 as desktop };
-        }
-        export { fontSize_3 as fontSize };
-    }
-    namespace h5 {
-        export namespace fontSize_4 {
-            let base_4: "1rem";
-            export { base_4 as base };
-            let desktop_4: "1rem";
-            export { desktop_4 as desktop };
-        }
-        export { fontSize_4 as fontSize };
-    }
-    namespace h6 {
-        export namespace fontSize_5 {
-            let base_5: "0.875rem";
-            export { base_5 as base };
-            let desktop_5: "0.875rem";
-            export { desktop_5 as desktop };
-        }
-        export { fontSize_5 as fontSize };
-    }
-}
-declare namespace _default {
-    export { variants };
-    export { baseStyle };
-    export { defaultProps };
-}
+export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare const variants: Record<HeadingVariant, Record<string, unknown>>;
+declare const _default: {
+    variants: Record<HeadingVariant, Record<string, unknown>>;
+    baseStyle: {
+        lineHeight: number;
+        fontWeight: 600;
+    };
+    defaultProps: {
+        variant: Record<string, unknown>;
+    };
+};
 export default _default;
-declare namespace baseStyle { }
-declare namespace defaultProps {
-    import variant = variants.h2;
-    export { variant };
-}

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,21 @@
+import { type ImageProps as ChakraImageProps } from '@chakra-ui/react';
+export type ImageProps = ChakraImageProps & {
+    /** If true, use the image directly without client side checks. */
+    isSSR?: boolean;
+    /** The Cloudinary account that this image is stored under. */
+    cloudinaryCloudName?: string;
+    /** The image ID that is stored in Cloudinary for this image. Will be used to replace the source path. */
+    cloudinaryImageId?: string;
+    /** The template URL to use to create the source path from. Replaceable values are {{WIDTH}}, {{HEIGHT}}, and {{QUALITY}}. */
+    cloudinaryTemplate?: string;
+    /** The width of the native HTML image, in pixels. Required if using a Cloudinary ID or Template. */
+    htmlWidth?: number;
+    /** The height of the native HTML image, in pixels. Required if using a Cloudinary ID or Template. */
+    htmlHeight?: number;
+    /** The quality setting if this image uses a Cloudinary ID or Template. */
+    quality?: number;
+    /** Whether to use lazy loading for this image. */
+    lazyLoad?: boolean;
+};
+declare const Image: ({ isSSR, cloudinaryImageId, cloudinaryTemplate, cloudinaryCloudName, htmlWidth, htmlHeight, quality, lazyLoad, ...otherProps }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+export default Image;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputProps as ChakraInputProps } from '@chakra-ui/react';
+export interface InputProps extends ChakraInputProps {
+    id: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    isOptional?: boolean;
+    customRequiredText?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

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

@@ -0,0 +1 @@
+export { default } from './Input';