@spothero/ui 25.5.1 → 25.11.0

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

@@ -1,601 +1,222 @@
-export function heightProps(height?: string): any;
-export namespace variants {
-    namespace primary {
-        let bg: string;
-        let borderColor: string;
-        let color: string;
-        namespace _hover {
-            export namespace _disabled {
-                let bg_1: string;
-                export { bg_1 as bg };
-                let borderColor_1: string;
-                export { borderColor_1 as borderColor };
-                let color_1: string;
-                export { color_1 as color };
-            }
-            export { hoverPrimaryColor as bg };
-            export { hoverPrimaryColor as borderColor };
-            let color_2: string;
-            export { color_2 as color };
-        }
-        namespace _active {
-            export { activePrimaryColor as bg };
-            export { activePrimaryColor as borderColor };
-            let color_3: string;
-            export { color_3 as color };
-        }
-    }
-    namespace primaryOnDark {
-        let bg_2: string;
-        export { bg_2 as bg };
-        let borderColor_2: string;
-        export { borderColor_2 as borderColor };
-        let color_4: string;
-        export { color_4 as color };
-        export namespace _hover_1 {
-            export { hoverDarkColor as bg };
-            export { hoverDarkColor as borderColor };
-            let color_5: string;
-            export { color_5 as color };
-        }
-        export { _hover_1 as _hover };
-        export namespace _focus {
-            let boxShadow: string;
-        }
-    }
-    namespace secondary {
-        let bg_3: string;
-        export { bg_3 as bg };
-        let borderColor_3: string;
-        export { borderColor_3 as borderColor };
-        let color_6: string;
-        export { color_6 as color };
-        export namespace _hover_2 {
-            export { hoverSecondaryColor as bg };
-            let color_7: string;
-            export { color_7 as color };
-        }
-        export { _hover_2 as _hover };
-        export namespace _active_1 {
-            export { activeSecondaryColor as bg };
-        }
-        export { _active_1 as _active };
-    }
-    namespace secondaryOnDark {
-        let bg_4: string;
-        export { bg_4 as bg };
-        let borderColor_4: string;
-        export { borderColor_4 as borderColor };
-        let color_8: string;
-        export { color_8 as color };
-        export namespace _hover_3 {
-            let bg_5: string;
-            export { bg_5 as bg };
-            let color_9: string;
-            export { color_9 as color };
-        }
-        export { _hover_3 as _hover };
-        export namespace _focus_1 {
-            let boxShadow_1: string;
-            export { boxShadow_1 as boxShadow };
-        }
-        export { _focus_1 as _focus };
-    }
-    namespace tertiary {
-        let bg_6: string;
-        export { bg_6 as bg };
-        export let borderWidth: string;
-        export let borderRadius: string;
-        let color_10: string;
-        export { color_10 as color };
-        export let h: string;
-        export let m: string;
-        export let minW: string;
-        export let p: string;
-        export let lineHeight: number;
-        export namespace _disabled_1 {
-            let bg_7: string;
-            export { bg_7 as bg };
-            let color_11: string;
-            export { color_11 as color };
-        }
-        export { _disabled_1 as _disabled };
-        export namespace _hover_4 {
-            export namespace _disabled_2 {
-                let color_12: string;
-                export { color_12 as color };
-            }
-            export { _disabled_2 as _disabled };
-        }
-        export { _hover_4 as _hover };
-        export namespace _active_2 {
-            export namespace _disabled_3 {
-                let color_13: string;
-                export { color_13 as color };
-            }
-            export { _disabled_3 as _disabled };
-        }
-        export { _active_2 as _active };
-    }
-    namespace tertiaryOnDark {
-        let bg_8: string;
-        export { bg_8 as bg };
-        let borderRadius_1: string;
-        export { borderRadius_1 as borderRadius };
-        let borderWidth_1: string;
-        export { borderWidth_1 as borderWidth };
-        let color_14: string;
-        export { color_14 as color };
-        let h_1: string;
-        export { h_1 as h };
-        let m_1: string;
-        export { m_1 as m };
-        let minW_1: string;
-        export { minW_1 as minW };
-        let p_1: string;
-        export { p_1 as p };
-        export namespace _disabled_4 {
-            let bg_9: string;
-            export { bg_9 as bg };
-            let color_15: string;
-            export { color_15 as color };
-            export let opacity: number;
-        }
-        export { _disabled_4 as _disabled };
-        export namespace _hover_5 {
-            let color_16: string;
-            export { color_16 as color };
-            let opacity_1: number;
-            export { opacity_1 as opacity };
-            export namespace _disabled_5 {
-                let opacity_2: number;
-                export { opacity_2 as opacity };
-            }
-            export { _disabled_5 as _disabled };
-        }
-        export { _hover_5 as _hover };
-    }
-    namespace black {
-        let bg_10: string;
-        export { bg_10 as bg };
-        let borderColor_5: string;
-        export { borderColor_5 as borderColor };
-        let color_17: string;
-        export { color_17 as color };
-        export let py: number;
-        export namespace _hover_6 {
-            export { hoverBlackColor as bg };
-            export { hoverBlackColor as borderColor };
-            let color_18: string;
-            export { color_18 as color };
-        }
-        export { _hover_6 as _hover };
-        export namespace _active_3 {
-            export { activeBlackColor as bg };
-            export { activeBlackColor as borderColor };
-            let color_19: string;
-            export { color_19 as color };
-        }
-        export { _active_3 as _active };
-    }
-    namespace blackOnDark {
-        let bg_11: string;
-        export { bg_11 as bg };
-        let borderColor_6: string;
-        export { borderColor_6 as borderColor };
-        let color_20: string;
-        export { color_20 as color };
-        let py_1: number;
-        export { py_1 as py };
-        export namespace _hover_7 {
-            export { hoverSecondaryColor as bg };
-            export { hoverSecondaryColor as borderColor };
-            let color_21: string;
-            export { color_21 as color };
-        }
-        export { _hover_7 as _hover };
-        export namespace _active_4 {
-            export { activeSecondaryColor as bg };
-            export { activeSecondaryColor as borderColor };
-            let color_22: string;
-            export { color_22 as color };
-        }
-        export { _active_4 as _active };
-        export namespace _focus_2 {
-            let boxShadow_2: string;
-            export { boxShadow_2 as boxShadow };
-        }
-        export { _focus_2 as _focus };
-    }
-    namespace destructive {
-        let bg_12: string;
-        export { bg_12 as bg };
-        let borderColor_7: string;
-        export { borderColor_7 as borderColor };
-        let color_23: string;
-        export { color_23 as color };
-        export namespace _hover_8 {
-            let borderColor_8: string;
-            export { borderColor_8 as borderColor };
-            let color_24: string;
-            export { color_24 as color };
-        }
-        export { _hover_8 as _hover };
-    }
-    namespace destructiveOnDark { }
-}
-declare const _default: {
-    baseStyle?: {
-        lineHeight: string;
-        borderRadius: string;
-        fontWeight: string;
-        transitionProperty: string;
-        transitionDuration: string;
-        _focusVisible: {
-            boxShadow: string;
-        };
-        _disabled: {
-            opacity: number;
-            cursor: string;
-            boxShadow: string;
-        };
-        _hover: {
-            _disabled: {
-                bg: string;
-            };
-        };
-    } | undefined;
-    sizes?: {
-        lg: {
-            h: string;
-            minW: string;
-            fontSize: string;
-            px: string;
-        };
-        md: {
-            h: string;
-            minW: string;
-            fontSize: string;
-            px: string;
-        };
-        sm: {
-            h: string;
-            minW: string;
-            fontSize: string;
-            px: string;
-        };
-        xs: {
-            h: string;
-            minW: string;
-            fontSize: string;
-            px: string;
-        };
-    } | undefined;
-    variants?: {
-        ghost: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            color: string;
-            _hover: {
-                bg: string;
-            };
-            _active: {
-                bg: string;
-            };
-            bg?: undefined;
-        } | {
-            color: string;
-            bg: string;
-            _hover: {
-                bg: string;
-            };
-            _active: {
-                bg: string;
-            };
-        };
-        outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            color: string;
-            _hover: {
-                bg: string;
-            };
-            _active: {
-                bg: string;
-            };
-            bg?: undefined;
-            border: string;
-            borderColor: string;
-            ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": {
-                marginEnd: string;
-            };
-            ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": {
-                marginBottom: string;
-            };
-        } | {
-            color: string;
-            bg: string;
-            _hover: {
-                bg: string;
-            };
-            _active: {
+import { theme as chakraDefaultTheme, type ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+export type ButtonHeight = ChakraButtonProps['height'] | 'md' | 'lg';
+export declare const heightProps: (height?: ButtonHeight) => {};
+/**
+ * Button Variants - Simplified Color System Using OKLCH
+ *
+ * This implementation uses OKLCH relative color syntax for perceptually uniform color adjustments.
+ * Benefits:
+ * - White-label theming: Only need ONE brand color (primary.brand)
+ * - No package dependencies (native CSS)
+ * - Text color NOT affected (unlike CSS filters)
+ * - Perceptually uniform adjustments (10% lighter looks consistent across all hues)
+ * - Can adjust lightness, chroma, or hue independently
+ * - Future-proof modern CSS standard
+ *
+ * OKLCH Syntax: oklch(from <color> <lightness> <chroma> <hue>)
+ * - Lightness adjustments: calc(l - 0.1) = 10% darker, calc(l + 0.1) = 10% lighter
+ * - Works with any color format (hex, rgb, etc.) - CSS converts automatically
+ *
+ * Browser Support: Chrome 111+, Safari 16.4+, Firefox 113+ (Mar-May 2023)
+ * Fallback: Older browsers use base color without hover effect degradation
+ *
+ * Note: Destructive variants still use semantic red for safety/UX consistency
+ */
+export declare const variants: {
+    readonly primary: {
+        readonly bg: "primary.brand";
+        readonly borderColor: "primary.brand";
+        readonly color: "text.brandText";
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
-            };
-            border: string;
-            borderColor: string;
-            ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": {
-                marginEnd: string;
-            };
-            ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": {
-                marginBottom: string;
-            };
-        };
-        solid: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            bg: string;
-            color: string;
-            _hover: {
-                bg: string;
-                _disabled: {
-                    bg: string;
-                };
-            };
-            _active: {
-                bg: string;
-            };
-        };
-        link: (props: import("@chakra-ui/react").StyleFunctionProps) => {
-            padding: number;
-            height: string;
-            lineHeight: string;
-            verticalAlign: string;
-            color: string;
-            _hover: {
-                textDecoration: string;
-                _disabled: {
-                    textDecoration: string;
-                };
-            };
-            _active: {
+                borderColor: string;
                 color: string;
             };
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "text.brandText";
         };
-        unstyled: {
-            bg: string;
-            color: string;
-            display: string;
-            lineHeight: string;
-            m: string;
-            p: string;
+        readonly _active: {
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "text.brandText";
         };
-    } | undefined;
-    defaultProps?: {
-        size?: "md" | "xs" | "sm" | "lg" | undefined;
-        variant?: "link" | "outline" | "solid" | "ghost" | "unstyled" | undefined;
-        colorScheme?: string | undefined;
-    } | undefined;
-} & {
-    variants: {
-        primary: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                bg: string;
-                borderColor: string;
-                color: string;
-            };
-            _active: {
+    };
+    readonly primaryOnDark: {
+        readonly bg: "yellow.default";
+        readonly borderColor: "yellow.default";
+        readonly color: "black";
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
                 borderColor: string;
                 color: string;
             };
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "black";
         };
-        primaryOnDark: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
+        readonly _focus: {
+            readonly boxShadow: "0 0 0 3px rgba(255, 255, 255, 0.7)";
+        };
+    };
+    readonly secondary: {
+        readonly bg: "white";
+        readonly borderColor: "gray.medium";
+        readonly color: "primary.default";
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
                 borderColor: string;
                 color: string;
             };
-            _focus: {
-                boxShadow: string;
-            };
+            readonly bg: string;
+            readonly color: "primary.default";
         };
-        secondary: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                bg: string;
-                color: string;
-            };
-            _active: {
-                bg: string;
-            };
+        readonly _active: {
+            readonly bg: string;
         };
-        secondaryOnDark: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
+    };
+    readonly secondaryOnDark: {
+        readonly bg: "none";
+        readonly borderColor: "white";
+        readonly color: "white";
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
+                borderColor: string;
                 color: string;
             };
-            _focus: {
-                boxShadow: string;
-            };
+            readonly bg: "white";
+            readonly color: "primary.default";
         };
-        tertiary: {
-            bg: string;
-            borderWidth: string;
-            borderRadius: string;
-            color: string;
-            h: string;
-            m: string;
-            minW: string;
-            p: string;
-            lineHeight: number;
-            _disabled: {
-                bg: string;
-                color: string;
-            };
-            _hover: {
-                _disabled: {
-                    color: string;
-                };
-            };
-            _active: {
-                _disabled: {
-                    color: string;
-                };
-            };
+        readonly _focus: {
+            readonly boxShadow: "0 0 0 3px rgba(255, 255, 255, 0.7)";
         };
-        tertiaryOnDark: {
-            bg: string;
-            borderRadius: string;
-            borderWidth: string;
-            color: string;
-            h: string;
-            m: string;
-            minW: string;
-            p: string;
-            _disabled: {
-                bg: string;
-                color: string;
-                opacity: number;
-            };
-            _hover: {
-                color: string;
-                opacity: number;
-                _disabled: {
-                    opacity: number;
-                };
+    };
+    readonly tertiary: {
+        readonly bg: "none";
+        readonly borderWidth: "none";
+        readonly borderRadius: "unset";
+        readonly color: "primary.default";
+        readonly h: "unset";
+        readonly m: "unset";
+        readonly minW: "unset";
+        readonly p: "unset";
+        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";
             };
         };
-        black: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            py: number;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                bg: string;
-                borderColor: string;
-                color: string;
+    };
+    readonly tertiaryOnDark: {
+        readonly bg: "none";
+        readonly borderRadius: "unset";
+        readonly borderWidth: "none";
+        readonly color: "white";
+        readonly h: "unset";
+        readonly m: "unset";
+        readonly minW: "unset";
+        readonly p: "unset";
+        readonly _disabled: {
+            readonly bg: "none";
+            readonly color: "white";
+            readonly opacity: 0.4;
+        };
+        readonly _hover: {
+            readonly color: "white";
+            readonly opacity: 0.8;
+            readonly _disabled: {
+                readonly opacity: 0.4;
             };
-            _active: {
+        };
+    };
+    readonly black: {
+        readonly bg: "black";
+        readonly borderColor: "black";
+        readonly color: "white";
+        readonly py: 2;
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
                 borderColor: string;
                 color: string;
             };
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "white";
         };
-        blackOnDark: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            py: number;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
+        readonly _active: {
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "white";
+        };
+    };
+    readonly blackOnDark: {
+        readonly bg: "white";
+        readonly borderColor: "white";
+        readonly color: "black";
+        readonly py: 2;
+        readonly _hover: {
+            readonly _disabled: {
                 bg: string;
                 borderColor: string;
                 color: string;
             };
-            _active: {
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "black";
+        };
+        readonly _active: {
+            readonly bg: string;
+            readonly borderColor: string;
+            readonly color: "black";
+        };
+        readonly _focus: {
+            readonly boxShadow: "0 0 0 3px rgba(255, 255, 255, 0.7)";
+        };
+    };
+    readonly destructive: {
+        readonly bg: string;
+        readonly borderColor: string;
+        readonly color: string;
+        readonly _hover: {
+            _disabled: {
                 bg: string;
                 borderColor: string;
                 color: string;
             };
-            _focus: {
-                boxShadow: string;
-            };
-        };
-        destructive: {
-            bg: string;
             borderColor: string;
             color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
-                borderColor: string;
-                color: string;
-            };
         };
-        destructiveOnDark: {
-            bg: string;
-            borderColor: string;
-            color: string;
-            _hover: {
-                _disabled: {
-                    bg: string;
-                    borderColor: string;
-                    color: string;
-                };
+    };
+    readonly destructiveOnDark: {
+        readonly bg: string;
+        readonly borderColor: string;
+        readonly color: string;
+        readonly _hover: {
+            _disabled: {
+                bg: string;
                 borderColor: string;
                 color: string;
             };
-        };
-    };
-    baseStyle: {
-        px: number;
-        py: number;
-        fontSize: string;
-        fontFamily: string;
-        lineHeight: number;
-        fontWeight: string;
-        borderWidth: string;
-        borderStyle: string;
-        borderRadius: string;
-        textTransform: string;
-        transition: string;
-        _disabled: {
-            cursor: string;
-            opacity: number;
-            bg: string;
             borderColor: string;
             color: string;
         };
-        '& svg': {
-            display: string;
-        };
-    };
-    defaultProps: {
-        size: null;
     };
 };
-export default _default;
-declare const hoverPrimaryColor: string;
-declare const activePrimaryColor: string;
-declare const hoverDarkColor: string;
-declare const hoverSecondaryColor: string;
-declare const activeSecondaryColor: string;
-declare const hoverBlackColor: string;
-declare const activeBlackColor: string;
+export type ButtonVariant = keyof typeof variants;
+type ButtonStyle = NonNullable<typeof chakraDefaultTheme.components.Button>;
+declare const buttonStyle: ButtonStyle;
+export default buttonStyle;