@homefile/components-v2 1.0.0

package/dist/theme/components/ButtonStyles.js

@@ -0,0 +1,405 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+exports.Button = {
+    baseStyle: {
+        fontFamily: 'primary',
+        transition: 'all 0.2s ease-in-out',
+        _focus: {
+            boxShadow: 'none',
+        },
+    },
+    sizes: {
+        small: {
+            w: 'button.sm',
+        },
+        medium: {
+            w: 'button.md',
+        },
+        large: {
+            w: 'button.lg',
+        },
+        full: {
+            w: 'button.full',
+        },
+        onboarding: {
+            w: ['button.full', 'button.md'],
+        },
+    },
+    variants: {
+        primary: {
+            fontSize: 'md',
+            textTransform: 'uppercase',
+            h: 'button.xs',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        secondary: {
+            fontSize: 'md',
+            textTransform: 'uppercase',
+            h: 'button.xs',
+            px: '1rem',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            backgroundColor: 'transparent',
+            border: '1px',
+            borderColor: 'blue.2',
+            color: 'blue.2',
+            _active: {
+                backgroundColor: 'lightBlue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                backgroundColor: 'lightGreen.3',
+                boxShadow: 'lg',
+            },
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+        },
+        tertiary: {
+            fontSize: 'md',
+            w: 'fit-content',
+            px: '1rem',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            backgroundColor: 'neutral.white',
+            border: '1px',
+            borderColor: 'blue.2',
+            color: 'blue.2',
+            _active: {
+                backgroundColor: 'lightBlue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                backgroundColor: 'lightGreen.3',
+                boxShadow: 'lg',
+            },
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+        },
+        iconOutlined: {
+            maxW: '3rem',
+            borderRadius: 'sm',
+            boxShadow: 'base',
+            backgroundColor: 'neutral.white',
+            border: '1px',
+            borderColor: 'blue.2',
+            color: 'blue.2',
+            _active: {
+                backgroundColor: 'lightBlue.3',
+                boxShadow: 'none',
+            },
+            _hover: {
+                backgroundColor: 'lightGreen.3',
+                boxShadow: 'lg',
+            },
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+        },
+        icon: {
+            color: 'lightBlue.6',
+            backgroundColor: 'transparent',
+            border: 'none',
+            boxShadow: 'none',
+            _hover: {
+                backgroundColor: 'transparent',
+                color: 'blue.2',
+            },
+            _focus: {
+                backgroundColor: 'transparent',
+            },
+        },
+        displayIcon: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            boxShadow: 'none',
+            _hover: {
+                filter: 'drop-shadow(2px 2px 8px rgb(0 0 0 / 0.3))',
+            },
+        },
+        menuIcon: {
+            color: 'blue.2',
+            backgroundColor: 'transparent',
+            border: 'none',
+            boxShadow: 'none',
+            _hover: {
+                backgroundColor: 'transparent',
+                color: 'blue.3',
+            },
+            _focus: {
+                backgroundColor: 'transparent',
+            },
+            _disabled: {
+                filter: 'grayscale(100%)',
+            },
+        },
+        menuIconWithShadow: {
+            color: 'blue.2',
+            backgroundColor: 'transparent',
+            border: 'none',
+            borderRadius: 'none',
+            _hover: {
+                backgroundColor: 'transparent',
+                color: 'blue.3',
+                boxShadow: 'lg',
+            },
+            _focus: {
+                backgroundColor: 'transparent',
+            },
+        },
+        folder: {
+            color: 'blue.2',
+            fontWeight: 'regular',
+            backgroundColor: 'transparent',
+            border: 'none',
+            borderRadius: 'none',
+            _disabled: {
+                pointerEvents: 'none',
+                filter: 'grayscale(100%)',
+            },
+            _hover: {
+                backgroundColor: 'neutral.white',
+                color: 'blue.3',
+                boxShadow: 'lg',
+                transform: 'scale(1.05)',
+            },
+            _focus: {
+                backgroundColor: 'transparent',
+            },
+        },
+        text: {
+            w: 'button.max',
+            fontFamily: 'secondary',
+            fontSize: 'md',
+            fontWeight: 'regular',
+            color: 'blue.2',
+            backgroundColor: 'transparent',
+            border: 'none',
+            boxShadow: 'none',
+            _hover: {
+                backgroundColor: 'transparent',
+                textDecoration: 'underline',
+                textUnderlineOffset: '2px',
+                color: 'blue.3',
+            },
+            _focus: {
+                backgroundColor: 'transparent',
+            },
+        },
+        leftRounded: {
+            overflow: 'hidden',
+            gap: '10px',
+            lineHeight: '30px',
+            fontSize: 'lg',
+            fontWeight: 'regular',
+            borderRightRadius: 'none',
+            borderLeftRadius: 'full',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        rightRounded: {
+            fontSize: 'md',
+            textTransform: 'uppercase',
+            h: 'button.xs',
+            pr: '3rem',
+            fontWeight: 'semibold',
+            borderRightRadius: 'full',
+            borderLeftRadius: 'none',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        menu: {
+            fontSize: 'md',
+            textTransform: 'uppercase',
+            h: 'button.xs',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                borderTopRadius: 'md',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        primaryFooter: {
+            minW: ['fit-content', '7.5rem'],
+            maxW: 'fit-content',
+            px: '1rem',
+            fontSize: 'md',
+            textTransform: 'uppercase',
+            h: 'button.xxs',
+            fontWeight: 'semibold',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        secondaryFooter: {
+            minW: ['fit-content', '6.25rem'],
+            maxW: 'fit-content',
+            fontSize: 'md',
+            h: 'button.xxs',
+            px: '1rem',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            backgroundColor: 'transparent',
+            border: '1px',
+            borderColor: 'blue.2',
+            color: 'blue.2',
+            _active: {
+                backgroundColor: 'lightBlue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                backgroundColor: 'lightGreen.3',
+                boxShadow: 'lg',
+            },
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+        },
+        tertiaryFooter: {
+            minW: ['fit-content', '6.25rem'],
+            maxW: 'fit-content',
+            px: '1rem',
+            fontSize: 'md',
+            textTransform: 'capitalize',
+            h: 'button.xxs',
+            fontWeight: 'regular',
+            borderRadius: 'none',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'blue.2',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _active: {
+                backgroundColor: 'blue.3',
+                borderRadius: 'lg',
+                fontWeight: 'medium',
+                boxShadow: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        tour: {
+            fontSize: 'md',
+            fontFamily: 'secondary',
+            py: '2',
+            px: '4',
+            w: 'fit-content',
+            rounded: 'full',
+            fontWeight: 'regular',
+            boxShadow: 'base',
+            color: 'neutral.white',
+            backgroundColor: 'green.1',
+            _disabled: {
+                filter: 'grayscale(100%)',
+                pointerEvents: 'none',
+            },
+            _hover: {
+                boxShadow: 'xl',
+            },
+        },
+        banner: {
+            fontSize: 'sm',
+            fontFamily: 'primary',
+            fontWeight: 'semibold',
+            color: 'blue.8',
+            px: '6',
+            w: 'fit-content',
+            h: 'button.xxs',
+            backgroundColor: 'neutral.white',
+            borderRadius: '3px',
+            _hover: {
+                backgroundColor: 'lightGreen.3',
+            },
+        },
+    },
+    defaultProps: {
+        size: 'full',
+        variant: 'primary',
+    },
+};
+exports.default = exports.Button;

package/dist/theme/components/CheckboxStyles.d.ts

@@ -0,0 +1,16 @@
+export declare const Checkbox: {
+    baseStyle: {
+        control: {
+            width: string;
+            minHeight: string;
+            borderWidth: string;
+            borderColor: string;
+            bg: string;
+            borderRadius: string;
+            _checked: {
+                bg: string;
+            };
+        };
+    };
+};
+export default Checkbox;

package/dist/theme/components/CheckboxStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+exports.Checkbox = {
+    baseStyle: {
+        control: {
+            width: '21px',
+            minHeight: '21px',
+            borderWidth: '1px',
+            borderColor: 'lightBlue.6',
+            bg: 'neutral.white',
+            borderRadius: 'none',
+            _checked: {
+                bg: 'blue.2',
+            },
+        },
+    },
+};
+exports.default = exports.Checkbox;

package/dist/theme/components/ContainerStyles.d.ts

@@ -0,0 +1,109 @@
+export declare const Container: {
+    baseStyle: {
+        borderRadius: string;
+        padding: number;
+    };
+    sizes: {
+        small: {
+            w: string;
+        };
+        medium: {
+            w: string;
+        };
+        large: {
+            w: string;
+        };
+        full: {
+            w: string;
+        };
+        onboarding: {
+            maxW: string;
+        };
+        validation: {
+            maxW: string;
+        };
+    };
+    variants: {
+        primary: {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        secondary: {
+            backgroundColor: string;
+        };
+        tertiary: {
+            backgroundColor: string;
+        };
+        launchpad: {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        ghost: {
+            backgroundColor: string;
+        };
+        footer: {
+            backgroundColor: string;
+            boxShadow: string;
+            borderTopRadius: string;
+        };
+        footerSquare: {
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        list: {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            transition: string;
+            _hover: {
+                backgroundColor: string;
+            };
+        };
+        dragDrop: {
+            backgroundColor: string;
+            border: string;
+            borderColor: string;
+            transition: string;
+            _hover: {
+                backgroundColor: string;
+            };
+        };
+        dragDropDashed: {
+            backgroundColor: string;
+            border: string;
+            borderRadius: string;
+            borderColor: string;
+            transition: string;
+            _hover: {
+                backgroundColor: string;
+                cursor: string;
+            };
+        };
+        partnerCard: {
+            backgroundColor: string;
+            boxShadow: string;
+            border: string;
+            transition: string;
+            _hover: {
+                boxShadow: string;
+                borderColor: string;
+            };
+        };
+        partnerCardWithoutHover: {
+            backgroundColor: string;
+            boxShadow: string;
+            border: string;
+        };
+        popup: {
+            backgroundColor: string;
+            boxShadow: string;
+            borderRadius: string;
+            overflow: string;
+        };
+    };
+    defaultProps: {
+        size: string;
+        variant: string;
+    };
+};
+export default Container;

package/dist/theme/components/ContainerStyles.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+exports.Container = {
+    baseStyle: {
+        borderRadius: 'sm',
+        padding: 0,
+    },
+    sizes: {
+        small: {
+            w: 'container.sm',
+        },
+        medium: {
+            w: 'container.md',
+        },
+        large: {
+            w: 'container.lg',
+        },
+        full: {
+            w: 'container.full',
+        },
+        onboarding: {
+            maxW: 'container.md',
+        },
+        validation: {
+            maxW: 'container.lg',
+        },
+    },
+    variants: {
+        primary: {
+            backgroundColor: 'neutral.white',
+            boxShadow: 'base',
+        },
+        secondary: {
+            backgroundColor: 'lightGreen.1',
+        },
+        tertiary: {
+            backgroundColor: 'lightBlue.1',
+        },
+        launchpad: {
+            backgroundColor: 'lightBlue.1',
+            boxShadow: 'base',
+        },
+        ghost: {
+            backgroundColor: 'transparent',
+        },
+        footer: {
+            backgroundColor: 'neutral.white',
+            boxShadow: '2xl',
+            borderTopRadius: 'xl',
+        },
+        footerSquare: {
+            backgroundColor: 'neutral.white',
+            boxShadow: '2xl',
+        },
+        list: {
+            backgroundColor: 'neutral.white',
+            border: '1px solid',
+            borderColor: 'lightBlue.6',
+            transition: 'all 0.2s ease-in-out',
+            _hover: {
+                backgroundColor: 'lightGreen.1',
+            },
+        },
+        dragDrop: {
+            backgroundColor: 'transparent',
+            border: '1px solid',
+            borderColor: 'lightBlue.4',
+            transition: 'all 0.2s ease-in-out',
+            _hover: {
+                backgroundColor: 'lightGreen.1',
+            },
+        },
+        dragDropDashed: {
+            backgroundColor: 'lightBlue.3',
+            border: '1px dashed',
+            borderRadius: 'md',
+            borderColor: 'lightBlue.6',
+            transition: 'all 0.2s ease-in-out',
+            _hover: {
+                backgroundColor: 'lightGreen.1',
+                cursor: 'pointer',
+            },
+        },
+        partnerCard: {
+            backgroundColor: 'lightBlue.1',
+            boxShadow: 'base',
+            border: '1px solid transparent',
+            transition: 'all 0.2s ease-in-out',
+            _hover: {
+                boxShadow: 'lg',
+                borderColor: 'blue.3',
+            },
+        },
+        partnerCardWithoutHover: {
+            backgroundColor: 'lightBlue.1',
+            boxShadow: 'base',
+            border: '1px solid transparent',
+        },
+        popup: {
+            backgroundColor: 'lightBlue.1',
+            boxShadow: 'xl',
+            borderRadius: '12px',
+            overflow: 'hidden',
+        },
+    },
+    defaultProps: {
+        size: 'full',
+        variant: 'primary',
+    },
+};
+exports.default = exports.Container;

package/dist/theme/components/DrawerStyles.d.ts

@@ -0,0 +1,13 @@
+export declare const Drawer: {
+    sizes: {
+        md: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+    };
+    defaultProps: {
+        size: string;
+    };
+};
+export default Drawer;

package/dist/theme/components/DrawerStyles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+exports.Drawer = {
+    sizes: {
+        md: {
+            dialog: {
+                maxWidth: '500px',
+            },
+        },
+    },
+    defaultProps: {
+        size: 'md',
+    },
+};
+exports.default = exports.Drawer;