@spothero/ui 25.12.0 → 25.16.0-beta.2

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';

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

@@ -1,308 +1,62 @@
-declare const _default: {
-    baseStyle?: ((props: import("@chakra-ui/react").StyleFunctionProps) => {
-        root: {
-            display: string;
-        };
-        tab: {
-            flex: number | undefined;
-            transitionProperty: string;
-            transitionDuration: string;
-            _focusVisible: {
-                zIndex: number;
-                boxShadow: string;
-            };
-            _disabled: {
-                cursor: string;
-                opacity: number;
-            };
-        };
-        tablist: {
-            justifyContent: string;
-            flexDirection: string;
-        };
-        tabpanel: {
-            p: number;
-        };
-    }) | undefined;
-    sizes?: {
-        sm: {
-            tab: {
-                py: number;
-                px: number;
-                fontSize: string;
+import { theme as chakraDefaultTheme } from '@chakra-ui/react';
+export declare const variants: {
+    readonly line: {
+        readonly tablist: {
+            readonly borderBottom: "2px solid";
+            readonly borderColor: "inherit";
+        };
+        readonly tab: {
+            readonly color: "gray.600";
+            readonly borderBottom: "2px solid";
+            readonly borderColor: "transparent";
+            readonly marginBottom: "-2px";
+            readonly _selected: {
+                readonly color: "primary.default";
+                readonly borderColor: "primary.default";
+                readonly fontWeight: "semibold";
+            };
+            readonly _active: {
+                readonly color: "black";
+                readonly bg: "transparent";
+            };
+            readonly _disabled: {
+                readonly opacity: 0.4;
+                readonly cursor: "not-allowed";
+            };
+            readonly _hover: {
+                readonly color: "black";
             };
         };
-        md: {
-            tab: {
-                fontSize: string;
-                py: number;
-                px: number;
-            };
-        };
-        lg: {
-            tab: {
-                fontSize: string;
-                py: number;
-                px: number;
-            };
-        };
-    } | undefined;
-    variants?: {
-        line: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            tablist: {
-                [x: string]: string;
-                borderColor: string;
-            };
-            tab: {
-                [x: string]: string | {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                    _active?: undefined;
-                } | {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor?: undefined;
-                    _active?: undefined;
-                } | {
-                    _active: {
-                        bg: string;
-                    };
-                    _dark?: undefined;
-                    borderColor?: undefined;
-                };
-                borderColor: string;
-                _selected: {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                };
-                _active: {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                };
-                _disabled: {
-                    _active: {
-                        bg: string;
-                    };
-                };
-                color: string;
-                bg: string;
-            };
-        };
-        enclosed: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            tab: {
-                [x: string]: string | {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                    borderBottomColor: string;
-                };
-                borderTopRadius: string;
-                border: string;
-                borderColor: string;
-                mb: string;
-                _selected: {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                    borderBottomColor: string;
-                };
-                color: string;
-            };
-            tablist: {
-                mb: string;
-                borderBottom: string;
-                borderColor: string;
-            };
-        };
-        "enclosed-colored": (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            tab: {
-                [x: string]: string | {
-                    [x: string]: string;
-                    marginEnd?: undefined;
-                    _dark?: undefined;
-                    borderColor?: undefined;
-                    borderTopColor?: undefined;
-                    borderBottomColor?: undefined;
-                } | {
-                    marginEnd: string;
-                    _dark?: undefined;
-                    borderColor?: undefined;
-                    borderTopColor?: undefined;
-                    borderBottomColor?: undefined;
-                } | {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                    borderTopColor: string;
-                    borderBottomColor: string;
-                    marginEnd?: undefined;
-                };
-                border: string;
-                borderColor: string;
-                _dark: {
-                    [x: string]: string;
-                };
-                mb: string;
-                _notLast: {
-                    marginEnd: string;
-                };
-                _selected: {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                    borderColor: string;
-                    borderTopColor: string;
-                    borderBottomColor: string;
-                };
-                color: string;
-                bg: string;
-            };
-            tablist: {
-                mb: string;
-                borderBottom: string;
-                borderColor: string;
-            };
-        };
-        "soft-rounded": (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            tab: {
-                borderRadius: string;
-                fontWeight: string;
-                color: string;
-                _selected: {
-                    color: any;
-                    bg: any;
-                };
-            };
-        };
-        "solid-rounded": (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            tab: {
-                [x: string]: string | {
-                    [x: string]: string;
-                    _dark?: undefined;
-                } | {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                };
-                borderRadius: string;
-                fontWeight: string;
-                _dark: {
-                    [x: string]: string;
-                };
-                _selected: {
-                    [x: string]: string | {
-                        [x: string]: string;
-                    };
-                    _dark: {
-                        [x: string]: string;
-                    };
-                };
-                color: string;
-                bg: string;
-            };
+    };
+    readonly enclosed: {
+        readonly tablist: {
+            readonly backgroundColor: "white";
+            readonly borderRadius: "8px";
+            readonly borderColor: "gray.200";
+            readonly borderWidth: "1px";
+            readonly paddingY: 1;
         };
-        unstyled: {};
-    } | undefined;
-    defaultProps?: {
-        size?: "md" | "sm" | "lg" | undefined;
-        variant?: "unstyled" | "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-    parts: ("root" | "tab" | "tabpanel" | "tabpanels" | "tablist" | "indicator")[];
-} & {
-    variants: {
-        line: {
-            tablist: {
-                borderBottom: string;
-                borderColor: string;
-            };
-            tab: {
-                color: string;
-                borderBottom: string;
-                borderColor: string;
-                marginBottom: string;
-                _selected: {
-                    color: string;
-                    borderColor: string;
-                    fontWeight: string;
-                };
-                _active: {
-                    color: string;
-                    bg: string;
-                };
-                _disabled: {
-                    opacity: number;
-                    cursor: string;
-                };
-                _hover: {
-                    color: string;
+        readonly tab: {
+            readonly borderRadius: "6px";
+            readonly marginX: 1;
+            readonly _selected: {
+                readonly fontWeight: "semibold";
+                readonly color: "white";
+                readonly backgroundColor: "primary.default";
+                readonly _hover: {
+                    readonly backgroundColor: "primary.600";
                 };
             };
-        };
-        enclosed: {
-            tablist: {
-                backgroundColor: string;
-                borderRadius: string;
-                borederColor: string;
-                borderWidth: string;
-                paddingY: number;
+            readonly _active: {
+                readonly backgroundColor: "gray.200";
             };
-            tab: {
-                borderRadius: string;
-                marginX: number;
-                _selected: {
-                    fontWeight: string;
-                    color: string;
-                    backgroundColor: string;
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                };
-                _active: {
-                    backgroundColor: string;
-                };
-                _disabled: {
-                    opacity: number;
-                    cursor: string;
-                };
+            readonly _disabled: {
+                readonly opacity: 0.4;
+                readonly cursor: "not-allowed";
             };
         };
     };
 };
-export default _default;
+type TabsStyle = NonNullable<typeof chakraDefaultTheme.components.Tabs>;
+declare const tabsStyle: TabsStyle;
+export default tabsStyle;

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type ChakraProviderProps } from '@chakra-ui/react';
+export interface ThemeProviderProps extends Omit<ChakraProviderProps, 'theme'> {
+    /** Adds additional theming on top of SpotHero's default configuration */
+    theme?: ChakraProviderProps['theme'];
+    /** If true, this will use the old `spothero-html` base styles */
+    useLegacyOverrides?: boolean;
+    /** If true, this will not load the `Fonts` global styles */
+    disableExternalFonts?: boolean;
+    /** The React node (generally your entire App) that will be provided the theme */
+    children?: React.ReactNode;
+}
+declare const ThemeProvider: {
+    ({ theme, useLegacyOverrides, disableExternalFonts, children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ThemeProvider;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,27 @@
+import { type ButtonGroupProps, type SystemStyleObject } from '@chakra-ui/react';
+import React from 'react';
+type ToggleButtonChildProps = {
+    value: string;
+    onClick?: React.MouseEventHandler;
+    sx?: SystemStyleObject;
+};
+export type ToggleButtonGroupProps = {
+    onChange: (value: string) => void;
+    value: string;
+    children: React.ReactElement<ToggleButtonChildProps> | Array<React.ReactElement<ToggleButtonChildProps>>;
+    groupProps?: ButtonGroupProps;
+    buttonGroupStyles?: SystemStyleObject;
+    childrenStyles?: SystemStyleObject;
+};
+/**
+ * @example (
+ * <ToggleButtonGroup onChange={handleChangeValue} value={value}>
+ *  <Button value={value1}>label1</Button>
+ *  <Button value={value2}>label2</Button>
+ * </ToggleButtonGroup>
+ * )
+ * @note
+ * must have multiple child elements
+ */
+declare const ToggleButtonGroup: React.ForwardRefExoticComponent<ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ToggleButtonGroup;

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

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

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

@@ -0,0 +1,5 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+export declare const defaultStyles: SystemStyleObject;
+export declare const inactiveStyles: SystemStyleObject;
+export declare const activeStyles: SystemStyleObject;
+export declare const buttonGroupStyles: SystemStyleObject;