@nextui-org/react 1.0.0-beta.6 → 1.0.0-beta.7

package/types/button/button.styles.d.ts

@@ -100,6 +100,12 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         light: true;
         color: string;
         css: {
+            [x: string]: string | {
+                '.nextui-drip-filler': {
+                    opacity: number;
+                    fill: string;
+                };
+            };
             bg: string;
             color: string;
             transform?: undefined;
@@ -208,11 +214,11 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         color: string;
         css: {
             bg: string;
+            color: string;
             transform?: undefined;
             px?: undefined;
             minWidth?: undefined;
             normalShadow?: undefined;
-            color?: undefined;
             borderColor?: undefined;
             padding?: undefined;
             bgClip?: undefined;
@@ -272,6 +278,70 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         ghost?: undefined;
         isHovered?: undefined;
         rounded?: undefined;
+    } | {
+        flat: true;
+        isHovered: true;
+        color: string;
+        css: {
+            bg: string;
+            transform?: undefined;
+            px?: undefined;
+            minWidth?: undefined;
+            normalShadow?: undefined;
+            color?: undefined;
+            borderColor?: undefined;
+            padding?: undefined;
+            bgClip?: undefined;
+            backgroundImage?: undefined;
+            border?: undefined;
+            '.nextui-button-text'?: undefined;
+            '.nextui-button-icon'?: undefined;
+            '.nextui-button-icon-right'?: undefined;
+            '.nextui-button-text-left'?: undefined;
+            '.nextui-button-text-right'?: undefined;
+            br?: undefined;
+        };
+        isPressed?: undefined;
+        animated?: undefined;
+        auto?: undefined;
+        size?: undefined;
+        shadow?: undefined;
+        light?: undefined;
+        bordered?: undefined;
+        ghost?: undefined;
+        rounded?: undefined;
+    } | {
+        flat: true;
+        isPressed: true;
+        color: string;
+        css: {
+            bg: string;
+            transform?: undefined;
+            px?: undefined;
+            minWidth?: undefined;
+            normalShadow?: undefined;
+            color?: undefined;
+            borderColor?: undefined;
+            padding?: undefined;
+            bgClip?: undefined;
+            backgroundImage?: undefined;
+            border?: undefined;
+            '.nextui-button-text'?: undefined;
+            '.nextui-button-icon'?: undefined;
+            '.nextui-button-icon-right'?: undefined;
+            '.nextui-button-text-left'?: undefined;
+            '.nextui-button-text-right'?: undefined;
+            br?: undefined;
+        };
+        animated?: undefined;
+        auto?: undefined;
+        size?: undefined;
+        shadow?: undefined;
+        light?: undefined;
+        bordered?: undefined;
+        ghost?: undefined;
+        isHovered?: undefined;
+        rounded?: undefined;
     } | {
         auto: true;
         color: string;
@@ -417,11 +487,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             };
         };
         ghost: {
-            true: {
-                '&:hover': {
-                    color: string;
-                };
-            };
+            true: {};
         };
         color: {
             default: {
@@ -568,9 +634,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             true: {};
         };
         isHovered: {
-            true: {
-                opacity: string;
-            };
+            true: {};
         };
         transition?: undefined;
         dflex?: undefined;
@@ -598,7 +662,6 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         isHovered?: undefined;
     };
     $$buttonBorderRadius: string;
-    $$buttonHoverOpacity: number;
     $$buttonPressedScale: number;
     dflex: string;
     appearance: string;
@@ -635,11 +698,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             };
         };
         ghost: {
-            true: {
-                '&:hover': {
-                    color: string;
-                };
-            };
+            true: {};
         };
         color: {
             default: {
@@ -786,9 +845,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             true: {};
         };
         isHovered: {
-            true: {
-                opacity: string;
-            };
+            true: {};
         };
     };
     compoundVariants: ({
@@ -891,6 +948,12 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         light: true;
         color: string;
         css: {
+            [x: string]: string | {
+                '.nextui-drip-filler': {
+                    opacity: number;
+                    fill: string;
+                };
+            };
             bg: string;
             color: string;
             transform?: undefined;
@@ -999,11 +1062,11 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         color: string;
         css: {
             bg: string;
+            color: string;
             transform?: undefined;
             px?: undefined;
             minWidth?: undefined;
             normalShadow?: undefined;
-            color?: undefined;
             borderColor?: undefined;
             padding?: undefined;
             bgClip?: undefined;
@@ -1063,6 +1126,70 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         ghost?: undefined;
         isHovered?: undefined;
         rounded?: undefined;
+    } | {
+        flat: true;
+        isHovered: true;
+        color: string;
+        css: {
+            bg: string;
+            transform?: undefined;
+            px?: undefined;
+            minWidth?: undefined;
+            normalShadow?: undefined;
+            color?: undefined;
+            borderColor?: undefined;
+            padding?: undefined;
+            bgClip?: undefined;
+            backgroundImage?: undefined;
+            border?: undefined;
+            '.nextui-button-text'?: undefined;
+            '.nextui-button-icon'?: undefined;
+            '.nextui-button-icon-right'?: undefined;
+            '.nextui-button-text-left'?: undefined;
+            '.nextui-button-text-right'?: undefined;
+            br?: undefined;
+        };
+        isPressed?: undefined;
+        animated?: undefined;
+        auto?: undefined;
+        size?: undefined;
+        shadow?: undefined;
+        light?: undefined;
+        bordered?: undefined;
+        ghost?: undefined;
+        rounded?: undefined;
+    } | {
+        flat: true;
+        isPressed: true;
+        color: string;
+        css: {
+            bg: string;
+            transform?: undefined;
+            px?: undefined;
+            minWidth?: undefined;
+            normalShadow?: undefined;
+            color?: undefined;
+            borderColor?: undefined;
+            padding?: undefined;
+            bgClip?: undefined;
+            backgroundImage?: undefined;
+            border?: undefined;
+            '.nextui-button-text'?: undefined;
+            '.nextui-button-icon'?: undefined;
+            '.nextui-button-icon-right'?: undefined;
+            '.nextui-button-text-left'?: undefined;
+            '.nextui-button-text-right'?: undefined;
+            br?: undefined;
+        };
+        animated?: undefined;
+        auto?: undefined;
+        size?: undefined;
+        shadow?: undefined;
+        light?: undefined;
+        bordered?: undefined;
+        ghost?: undefined;
+        isHovered?: undefined;
+        rounded?: undefined;
     } | {
         auto: true;
         color: string;
@@ -1187,88 +1314,12 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         xl: string;
     };
     colors: {
-        accents1: string;
-        accents2: string;
-        accents3: string;
-        accents4: string;
-        accents5: string;
-        accents6: string;
-        accents7: string;
-        accents8: string;
-        accents9: string;
-        background: string;
-        foreground: string;
-        backgroundContrast: string;
         text: string;
+        link: string;
         codeLight: string;
         code: string;
-        border: string;
         selection: string;
-        white: string;
-        black: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
+        gray50: string;
         gray100: string;
         gray200: string;
         gray300: string;
@@ -1278,28 +1329,143 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         gray700: string;
         gray800: string;
         gray900: string;
+        pink50: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        cyan50: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        background: string;
+        foreground: string;
+        backgroundContrast: string;
+        white: string;
+        black: string;
         primaryLight: string;
+        primaryLightHover: string;
+        primaryLightActive: string;
+        primaryLightContrast: string;
         primary: string;
-        primaryDark: string;
+        primaryBorder: string;
+        primaryBorderHover: string;
+        primarySolidHover: string;
+        primarySolidContrast: string;
         primaryShadow: string;
         secondaryLight: string;
+        secondaryLightHover: string;
+        secondaryLightActive: string;
+        secondaryLightContrast: string;
         secondary: string;
-        secondaryDark: string;
+        secondaryBorder: string;
+        secondaryBorderHover: string;
+        secondarySolidHover: string;
+        secondarySolidContrast: string;
         secondaryShadow: string;
         successLight: string;
+        successLightHover: string;
+        successLightActive: string;
+        successLightContrast: string;
         success: string;
-        successDark: string;
+        successBorder: string;
+        successBorderHover: string;
+        successSolidHover: string;
+        successSolidContrast: string;
         successShadow: string;
         warningLight: string;
+        warningLightHover: string;
+        warningLightActive: string;
+        warningLightContrast: string;
         warning: string;
-        warningDark: string;
+        warningBorder: string;
+        warningBorderHover: string;
+        warningSolidHover: string;
+        warningSolidContrast: string;
         warningShadow: string;
         errorLight: string;
+        errorLightHover: string;
+        errorLightActive: string;
+        errorLightContrast: string;
         error: string;
-        errorDark: string;
+        errorBorder: string;
+        errorBorderHover: string;
+        errorSolidHover: string;
+        errorSolidContrast: string;
         errorShadow: string;
         gradient: string;
-        link: string;
+        accents0: string;
+        accents1: string;
+        accents2: string;
+        accents3: string;
+        accents4: string;
+        accents5: string;
+        accents6: string;
+        accents7: string;
+        accents8: string;
+        accents9: string;
+        border: string;
     };
     fonts: {
         sans: string;
@@ -2122,88 +2288,12 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         xl: string;
     };
     colors: {
-        accents1: string;
-        accents2: string;
-        accents3: string;
-        accents4: string;
-        accents5: string;
-        accents6: string;
-        accents7: string;
-        accents8: string;
-        accents9: string;
-        background: string;
-        foreground: string;
-        backgroundContrast: string;
         text: string;
+        link: string;
         codeLight: string;
         code: string;
-        border: string;
         selection: string;
-        white: string;
-        black: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        purple100: string;
-        purple200: string;
-        purple300: string;
-        purple400: string;
-        purple500: string;
-        purple600: string;
-        purple700: string;
-        purple800: string;
-        purple900: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        cyan100: string;
-        cyan200: string;
-        cyan300: string;
-        cyan400: string;
-        cyan500: string;
-        cyan600: string;
-        cyan700: string;
-        cyan800: string;
-        cyan900: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
+        gray50: string;
         gray100: string;
         gray200: string;
         gray300: string;
@@ -2213,28 +2303,143 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         gray700: string;
         gray800: string;
         gray900: string;
+        pink50: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        cyan50: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        background: string;
+        foreground: string;
+        backgroundContrast: string;
+        white: string;
+        black: string;
         primaryLight: string;
+        primaryLightHover: string;
+        primaryLightActive: string;
+        primaryLightContrast: string;
         primary: string;
-        primaryDark: string;
+        primaryBorder: string;
+        primaryBorderHover: string;
+        primarySolidHover: string;
+        primarySolidContrast: string;
         primaryShadow: string;
         secondaryLight: string;
+        secondaryLightHover: string;
+        secondaryLightActive: string;
+        secondaryLightContrast: string;
         secondary: string;
-        secondaryDark: string;
+        secondaryBorder: string;
+        secondaryBorderHover: string;
+        secondarySolidHover: string;
+        secondarySolidContrast: string;
         secondaryShadow: string;
         successLight: string;
+        successLightHover: string;
+        successLightActive: string;
+        successLightContrast: string;
         success: string;
-        successDark: string;
+        successBorder: string;
+        successBorderHover: string;
+        successSolidHover: string;
+        successSolidContrast: string;
         successShadow: string;
         warningLight: string;
+        warningLightHover: string;
+        warningLightActive: string;
+        warningLightContrast: string;
         warning: string;
-        warningDark: string;
+        warningBorder: string;
+        warningBorderHover: string;
+        warningSolidHover: string;
+        warningSolidContrast: string;
         warningShadow: string;
         errorLight: string;
+        errorLightHover: string;
+        errorLightActive: string;
+        errorLightContrast: string;
         error: string;
-        errorDark: string;
+        errorBorder: string;
+        errorBorderHover: string;
+        errorSolidHover: string;
+        errorSolidContrast: string;
         errorShadow: string;
         gradient: string;
-        link: string;
+        accents0: string;
+        accents1: string;
+        accents2: string;
+        accents3: string;
+        accents4: string;
+        accents5: string;
+        accents6: string;
+        accents7: string;
+        accents8: string;
+        accents9: string;
+        border: string;
     };
     fonts: {
         sans: string;