@spothero/ui 25.15.0-beta.1 → 25.16.0-beta.2

package/dist/components/Accordion/AccordionActionButton.d.ts

@@ -1,3 +1,7 @@
-export default AccordionActionButton;
-declare const AccordionActionButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+export type AccordionActionButtonProps = {
+    onClick?: () => void;
+    children: React.ReactNode;
+};
+declare const AccordionActionButton: React.ForwardRefExoticComponent<AccordionActionButtonProps & React.RefAttributes<HTMLDivElement>>;
+export default AccordionActionButton;

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

@@ -0,0 +1,6 @@
+import { type MenuProps as ChakraMenuProps } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+export interface MenuProps extends ChakraMenuProps {
+}
+declare const Menu: ForwardRefComponent<HTMLDivElement, MenuProps>;
+export default Menu;

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

@@ -1,258 +1,4 @@
-declare const _default: {
-    baseStyle?: {
-        button: {
-            transitionProperty: string;
-            transitionDuration: string;
-        };
-        list: {
-            [x: string]: string | number | {
-                [x: string]: string;
-            };
-            _dark: {
-                [x: string]: string;
-            };
-            color: string;
-            minW: string;
-            py: string;
-            zIndex: number;
-            borderRadius: string;
-            borderWidth: string;
-            bg: string;
-            boxShadow: string;
-        };
-        item: {
-            py: string;
-            px: string;
-            transitionProperty: string;
-            transitionDuration: string;
-            transitionTimingFunction: string;
-            _focus: {
-                [x: string]: string | {
-                    [x: string]: string;
-                };
-                _dark: {
-                    [x: string]: string;
-                };
-            };
-            _active: {
-                [x: string]: string | {
-                    [x: string]: string;
-                };
-                _dark: {
-                    [x: string]: string;
-                };
-            };
-            _expanded: {
-                [x: string]: string | {
-                    [x: string]: string;
-                };
-                _dark: {
-                    [x: string]: string;
-                };
-            };
-            _disabled: {
-                opacity: number;
-                cursor: string;
-            };
-            bg: string;
-        };
-        groupTitle: {
-            mx: number;
-            my: number;
-            fontWeight: string;
-            fontSize: string;
-        };
-        icon: {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            flexShrink: number;
-        };
-        command: {
-            opacity: number;
-        };
-        divider: {
-            border: number;
-            borderBottom: string;
-            borderColor: string;
-            my: string;
-            opacity: number;
-        };
-    } | undefined;
-    sizes?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
-        }>;
-    } | undefined;
-    variants?: {
-        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
-        }>;
-    } | undefined;
-    defaultProps?: {
-        size?: string | number | undefined;
-        variant?: string | number | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("button" | "icon" | "item" | "list" | "groupTitle" | "command" | "divider")[];
-} & {
-    baseStyle: {
-        button: {
-            px: number;
-            py: number;
-            fontSize: string;
-            fontFamily: string;
-            lineHeight: number;
-            fontWeight: string;
-            borderWidth: string;
-            borderStyle: string;
-            borderRadius: string;
-            textTransform: string;
-            transition: string;
-            _hover: {
-                bg: string;
-                borderColor: string;
-            };
-            _disabled: {
-                cursor: string;
-                opacity: number;
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            _focus: {
-                zIndex: number;
-                boxShadow: string;
-            };
-        };
-        list: {
-            bg: string;
-            boxShadow: string;
-            padding: number;
-            zIndex: string;
-            width: number;
-        };
-        item: {
-            paddingX: number;
-            paddingY: number;
-            _focus: {
-                zIndex: number;
-                boxShadow: string;
-            };
-        };
-        groupTitle: {
-            fontWeight: string;
-            color: string;
-            padding: number;
-        };
-        command: {
-            opacity: string;
-            fontFamily: string;
-            fontSize: string;
-            letterSpacing: string;
-            paddingL: number;
-        };
-        divider: {
-            marginY: number;
-            borderColor: string;
-        };
-    };
-    variants: {
-        basic: {
-            button: {
-                bg: string;
-                borderColor: string;
-                color: string;
-                _hover: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                    _disabled: {
-                        bg: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                };
-            };
-            list: {
-                bg: string;
-                boxShadow: string;
-                zIndex: string;
-                borderColor: string;
-                borderWidth: string;
-                borderStyle: string;
-                borderRadius: string;
-                padding: number;
-                width: number;
-            };
-            groupTitle: {
-                fontWeight: string;
-                fontSize: string;
-                color: string;
-                padding: number;
-            };
-            item: {
-                fontWeight: string;
-                _hover: {
-                    color: string;
-                };
-            };
-        };
-        full: {
-            button: {
-                height: number;
-                fontSize: string;
-                fontWeight: string;
-                color: string;
-                borderColor: string;
-                backgroundColor: string;
-                borderRadius: string;
-                paddingX: number;
-                paddingY: string;
-                _hover: {
-                    color: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                };
-                _active: {
-                    color: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    _hover: {
-                        color: string;
-                        backgroundColor: string;
-                        borderColor: string;
-                    };
-                };
-            };
-            list: {
-                height: string;
-                width: string;
-                padding: number;
-                backgroundColor: string;
-            };
-            groupTitle: {
-                fontSize: string;
-                weight: string;
-                color: string;
-            };
-            item: {
-                display: string;
-                paddingX: number;
-                paddingY: number;
-                marginBottom: number;
-                _last: {
-                    marginBottom: number;
-                };
-                _hover: {
-                    backgroundColor: string;
-                };
-                _focus: {
-                    boxShadow: string;
-                    backgroundColor: string;
-                };
-            };
-        };
-    };
-};
-export default _default;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+type MenuStyle = NonNullable<typeof chakraDefaultTheme.components.Menu>;
+declare const menuStyle: MenuStyle;
+export default menuStyle;

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

@@ -0,0 +1,2 @@
+export { default } from './Menu';
+export { MenuButton, MenuList, MenuItem, MenuItemOption, MenuGroup, MenuOptionGroup, MenuDivider, } from '@chakra-ui/react';

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

@@ -4,6 +4,7 @@ declare const footer: {
     readonly padding: 4;
     readonly gap: 4;
     readonly justifyContent: "flex-start";
+    readonly alignItems: "normal";
     readonly flexDirection: {
         readonly base: "column";
         readonly desktop: "row-reverse";

package/dist/components/SelectionCard/SelectionCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type BoxProps } from '@chakra-ui/react';
+import type { CheckboxProps } from '../Checkbox/Checkbox';
+export type SelectionCardProps = Omit<CheckboxProps, 'children' | 'value' | 'size'> & {
+    label: React.ReactNode;
+    expandableChildren?: React.ReactNode;
+    defaultChecked?: boolean;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    value: string;
+    helperText?: string;
+    isRadio?: boolean;
+    isExpandable?: boolean;
+    expandableChildrenStyles?: BoxProps;
+    size?: 'sm' | 'md' | 'lg';
+    topChild?: React.ReactElement;
+    expandableContentKey?: string;
+};
+declare const SelectionCard: React.ForwardRefExoticComponent<Omit<SelectionCardProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default SelectionCard;

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

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

package/dist/components/Table/Table.d.ts

@@ -0,0 +1 @@
+export { Table as default } from '@chakra-ui/react';

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

@@ -1,66 +1,74 @@
-export namespace variants {
-    export { roundedWhiteVariant as rounded };
-    export { roundedGrayVariant as roundedGray };
-}
-declare namespace _default {
-    export { parts };
-    export { variants };
-    export { baseStyle };
-    export { defaultProps };
-}
+export declare const variants: {
+    rounded: {
+        table: {
+            backgroundColor: string;
+            borderRadius: number;
+            boxShadow: string;
+            marginBottom: number;
+        };
+    };
+    roundedGray: {
+        table: {
+            backgroundColor: string;
+            borderRadius: number;
+            boxShadow: string;
+            marginBottom: number;
+        };
+    };
+};
+declare const _default: {
+    parts: string[];
+    variants: {
+        rounded: {
+            table: {
+                backgroundColor: string;
+                borderRadius: number;
+                boxShadow: string;
+                marginBottom: number;
+            };
+        };
+        roundedGray: {
+            table: {
+                backgroundColor: string;
+                borderRadius: number;
+                boxShadow: string;
+                marginBottom: number;
+            };
+        };
+    };
+    baseStyle: {
+        table: {
+            borderCollapse: string;
+            color: string;
+            width: string;
+        };
+        thead: {
+            borderBottom: string;
+            borderColor: string;
+        };
+        th: {
+            fontFamily: string;
+            fontSize: unknown;
+            fontWeight: string;
+            letterSpacing: string;
+            padding: number;
+            textAlign: string;
+            textTransform: string;
+        };
+        tr: {
+            borderBottom: string;
+            borderColor: string;
+            _last: {
+                border: string;
+            };
+        };
+        td: {
+            padding: number;
+            textAlign: string;
+        };
+    };
+    defaultProps: {
+        readonly variant: "rounded";
+    };
+};
 export default _default;
-declare namespace roundedWhiteVariant {
-    namespace table {
-        let backgroundColor: string;
-        let borderRadius: number;
-        let boxShadow: string;
-        let marginBottom: number;
-    }
-}
-declare namespace roundedGrayVariant {
-    export namespace table_1 {
-        let backgroundColor_1: string;
-        export { backgroundColor_1 as backgroundColor };
-    }
-    export { table_1 as table };
-}
-declare const parts: string[];
-declare namespace baseStyle {
-    export namespace table_2 {
-        let borderCollapse: string;
-        let color: string;
-        let width: string;
-    }
-    export { table_2 as table };
-    export namespace thead {
-        let borderBottom: string;
-        let borderColor: string;
-    }
-    export namespace th {
-        let fontFamily: string;
-        let fontSize: unknown;
-        let fontWeight: string;
-        let letterSpacing: string;
-        let padding: number;
-        let textAlign: string;
-        let textTransform: string;
-    }
-    export namespace tr {
-        let borderBottom_1: string;
-        export { borderBottom_1 as borderBottom };
-        let borderColor_1: string;
-        export { borderColor_1 as borderColor };
-        export namespace _last {
-            let border: string;
-        }
-    }
-    export namespace td {
-        let padding_1: number;
-        export { padding_1 as padding };
-        let textAlign_1: string;
-        export { textAlign_1 as textAlign };
-    }
-}
-declare namespace defaultProps {
-    let variant: string;
-}

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

@@ -0,0 +1,2 @@
+export { default as Table } from './Table';
+export { Thead, Tbody, Tfoot, Tr, Th, Td, TableCaption, TableContainer, } from '@chakra-ui/react';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { type TabsProps as ChakraTabsProps } from '@chakra-ui/react';
+import type { ForwardRefComponent } from '../../types/forwardRefComponent';
+import { SIZE_BODY, SIZE_HEADING, SIZE_SMALL, type TabsSize } from './combineSizeWithVariant';
+export interface TabsProps extends Omit<ChakraTabsProps, 'size'> {
+    /** Controls the size of Tabs */
+    size?: TabsSize;
+}
+declare const Tabs: ForwardRefComponent<HTMLDivElement, TabsProps>;
+export default Tabs;
+export { SIZE_BODY, SIZE_HEADING, SIZE_SMALL };

package/dist/components/Tabs/combineSizeWithVariant.d.ts

@@ -0,0 +1,120 @@
+import { variants } from './styles/index';
+export declare const SIZE_SMALL = "small";
+export declare const SIZE_BODY = "body";
+export declare const SIZE_HEADING = "heading";
+export type TabsSize = typeof SIZE_SMALL | typeof SIZE_BODY | typeof SIZE_HEADING;
+export type TabsVariant = keyof typeof variants;
+/**
+ * ### `combineSizeWithVariant`
+ * A function that takes in the `size` value, and the
+ * `variant` value. The default-like styling for the `size` prop is merged with the styling from the
+ * `variant` and a combined styleProp object is returned.
+ *
+ * @function combineSizeWithVariant
+ * @param {string} args.size - The size of Tabs component
+ * @param {string} args.variant - The style variant for the Text component
+ * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
+ */
+type CombineSizeWithVariantArgs = {
+    size: TabsSize;
+    variant?: TabsVariant;
+};
+declare const combineSizeWithVariant: ({ size, variant, }: CombineSizeWithVariantArgs) => {
+    tab: {
+        fontSize: "1.25rem" | "1rem" | "0.75rem";
+        color: "gray.600";
+        borderBottom: "2px solid";
+        borderColor: "transparent";
+        marginBottom: "-2px";
+        _selected: {
+            readonly color: "primary.default";
+            readonly borderColor: "primary.default";
+            readonly fontWeight: "semibold";
+        };
+        _active: {
+            readonly color: "black";
+            readonly bg: "transparent";
+        };
+        _disabled: {
+            readonly opacity: 0.4;
+            readonly cursor: "not-allowed";
+        };
+        _hover: {
+            readonly color: "black";
+        };
+    } | {
+        fontSize: "1.25rem" | "1rem" | "0.75rem";
+        borderRadius: "6px";
+        marginX: 1;
+        _selected: {
+            readonly fontWeight: "semibold";
+            readonly color: "white";
+            readonly backgroundColor: "primary.default";
+            readonly _hover: {
+                readonly backgroundColor: "primary.600";
+            };
+        };
+        _active: {
+            readonly backgroundColor: "gray.200";
+        };
+        _disabled: {
+            readonly opacity: 0.4;
+            readonly cursor: "not-allowed";
+        };
+    };
+    tablist: {
+        readonly borderBottom: "2px solid";
+        readonly borderColor: "inherit";
+    };
+} | {
+    tab: {
+        fontSize: "1.25rem" | "1rem" | "0.75rem";
+        color: "gray.600";
+        borderBottom: "2px solid";
+        borderColor: "transparent";
+        marginBottom: "-2px";
+        _selected: {
+            readonly color: "primary.default";
+            readonly borderColor: "primary.default";
+            readonly fontWeight: "semibold";
+        };
+        _active: {
+            readonly color: "black";
+            readonly bg: "transparent";
+        };
+        _disabled: {
+            readonly opacity: 0.4;
+            readonly cursor: "not-allowed";
+        };
+        _hover: {
+            readonly color: "black";
+        };
+    } | {
+        fontSize: "1.25rem" | "1rem" | "0.75rem";
+        borderRadius: "6px";
+        marginX: 1;
+        _selected: {
+            readonly fontWeight: "semibold";
+            readonly color: "white";
+            readonly backgroundColor: "primary.default";
+            readonly _hover: {
+                readonly backgroundColor: "primary.600";
+            };
+        };
+        _active: {
+            readonly backgroundColor: "gray.200";
+        };
+        _disabled: {
+            readonly opacity: 0.4;
+            readonly cursor: "not-allowed";
+        };
+    };
+    tablist: {
+        readonly backgroundColor: "white";
+        readonly borderRadius: "8px";
+        readonly borderColor: "gray.200";
+        readonly borderWidth: "1px";
+        readonly paddingY: 1;
+    };
+};
+export default combineSizeWithVariant;

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

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+export { TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';