@cruk/chakra-components 1.0.1 → 1.0.3

package/dist/types/src/theme/cruk/components/input.d.ts

@@ -11,29 +11,56 @@ export declare const inputTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: ("group" | "addon" | "field" | "element")[];
         }>;
     };
     variants?: {
-        outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
             field: {
                 height: {
                     base: "50px";
-                    lg: "53px";
+                    lg: "52px";
                 };
-                border: string;
+                py: string;
                 borderColor: string;
-                transition: string;
                 boxSizing: string;
+                transition: string;
                 _hover: {
-                    borderColor: string;
-                    boxShadow: string;
-                    transition: string;
+                    "&:not(:focus):not(:disabled)": {
+                        borderColor: string;
+                        boxShadow: string;
+                        outline: number;
+                        transition: string;
+                        "&:not(:has(+ .chakra-input__left-element))": {
+                            px: string;
+                        };
+                    };
+                    "&:disabled": {
+                        borderColor: string;
+                        boxShadow: string;
+                    };
+                };
+                _groupHover: {
+                    "&:not(:focus):not(:disabled)": {
+                        borderColor: string;
+                        boxShadow: string;
+                        borderWidth: number;
+                        outline: number;
+                        transition: string;
+                        px: string;
+                    };
+                    "&:disabled": {
+                        borderColor: string;
+                        boxShadow: string;
+                    };
                 };
                 _placeholder: {
                     color: string;
-                    fontSize: string;
+                    fontSize: {
+                        base: "text.sm";
+                        lg: "text.md";
+                    };
                 };
                 _readOnly: {
                     boxShadow: string;
@@ -41,47 +68,46 @@ export declare const inputTheme: {
                 };
                 _focus: {
                     zIndex: number;
-                    borderWidth: string;
                     borderColor: string;
                     boxShadow: string;
+                    outline: number;
+                    borderWidth: number;
+                    "&:not(:has(+ .chakra-input__left-element))": {
+                        px: string;
+                    };
                 };
                 _focusVisible: {
                     zIndex: number;
-                    borderWidth: string;
                     borderColor: string;
                     boxShadow: string;
+                    outline: number;
                 };
                 _disabled: {
-                    borderWidth: string;
                     borderColor: string;
                     bg: string;
                     cursor: string;
                     opacity: string;
                     color: string;
-                    _hover: {
-                        boxShadow: string;
-                        borderColor: string;
-                    };
-                    _placeholder: {
-                        color: string;
-                        fontSize: string;
-                    };
+                    boxShadow: string;
                 };
                 _invalid: {
-                    borderWidth: string;
                     borderColor: string;
                     boxShadow: string;
                     _hover: {
+                        borderColor: string;
                         boxShadow: string;
+                    };
+                    _groupHover: {
                         borderColor: string;
+                        boxShadow: string;
                     };
                     _focus: {
-                        boxShadow: string;
                         borderColor: string;
+                        boxShadow: string;
                     };
                     _focusVisible: {
-                        boxShadow: string;
                         borderColor: string;
+                        boxShadow: string;
                     };
                 };
             };
@@ -105,19 +131,54 @@ export declare const inputTheme: {
                     paddingX: number;
                     width: string;
                 };
+                ".chakra-input__right-addon": {
+                    borderWidth: string;
+                    borderColor: string;
+                    borderLeft: string;
+                    paddingX: number;
+                };
+                _groupHover: {
+                    ".chakra-input[disabled] + .chakra-input__right-addon": {
+                        borderColor: string;
+                        borderWidth: string;
+                        bg: string;
+                        cursor: string;
+                        opacity: string;
+                        color: string;
+                    };
+                    ".chakra-input__right-addon": {
+                        borderWidth: string;
+                        borderColor: string;
+                        px: string;
+                    };
+                };
                 _hover: {
-                    ".chakra-input__left-element": {
-                        borderRightColor: string;
+                    ".chakra-input__right-addon": {
+                        borderWidth: string;
+                        borderColor: string;
+                        px: string;
                     };
                 };
                 ".chakra-input:focus + .chakra-input__left-element": {
                     borderRightColor: string;
                 };
+                ".chakra-input:focus + .chakra-input__right-addon": {
+                    borderColor: string;
+                    borderWidth: string;
+                    px: string;
+                };
+                ".chakra-input[aria-invalid=true] + .chakra-input__right-addon": {
+                    borderColor: string;
+                    borderWidth: string;
+                    px: string;
+                };
                 ".chakra-input[aria-invalid=true] + .chakra-input__left-element": {
                     borderRightColor: string;
                 };
-                ".chakra-input[disabled] + .chakra-input__left-element": {
-                    borderRightColor: string;
+                ".chakra-input[disabled] + .chakra-input__right-addon": {
+                    borderColor: string;
+                    backgroundColor: string;
+                    borderWidth: string;
                 };
             };
         };

package/dist/types/src/theme/cruk/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/input.ts"],"names":[],"mappings":"AA8IA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/input.ts"],"names":[],"mappings":"AAqMA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/types/src/theme/cruk/components/inputNumber.d.ts

@@ -0,0 +1,129 @@
+export declare const numberInputTheme: {
+    baseStyle?: {
+        field: {
+            fontFamily: string;
+            fontSize: {
+                base: "text.sm";
+                lg: "text.md";
+            };
+            borderRadius: string;
+            cursor: string;
+        };
+    };
+    sizes?: {
+        sm: {
+            field: {
+                height: string;
+                padding: string;
+            };
+        };
+        lg: {
+            field: {
+                height: string;
+                padding: string;
+            };
+        };
+    };
+    variants?: {
+        outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
+            field: {
+                borderColor: string;
+                boxSizing: string;
+                transition: string;
+                _hover: {
+                    "&:not(:focus)": {
+                        borderColor: string;
+                        boxShadow: string;
+                        borderWidth: number;
+                        outline: number;
+                        transition: string;
+                    };
+                };
+                _placeholder: {
+                    color: string;
+                    fontSize: string;
+                };
+                _readOnly: {
+                    boxShadow: string;
+                    userSelect: string;
+                };
+                _focus: {
+                    zIndex: number;
+                    borderColor: string;
+                    boxShadow: string;
+                    outline: number;
+                    borderWidth: number;
+                };
+                _focusVisible: {
+                    zIndex: number;
+                    borderColor: string;
+                    boxShadow: string;
+                    outline: number;
+                    borderWidth: number;
+                };
+                _disabled: {
+                    borderWidth: string;
+                    borderColor: string;
+                    bg: string;
+                    cursor: string;
+                    opacity: string;
+                    color: string;
+                    _hover: {
+                        boxShadow: string;
+                        borderColor: string;
+                    };
+                    _placeholder: {
+                        color: string;
+                        fontSize: string;
+                    };
+                };
+                _invalid: {
+                    borderWidth: string;
+                    borderColor: string;
+                    boxShadow: string;
+                    _hover: {
+                        boxShadow: string;
+                        borderColor: string;
+                    };
+                    _focus: {
+                        boxShadow: string;
+                        borderColor: string;
+                    };
+                    _focusVisible: {
+                        boxShadow: string;
+                        borderColor: string;
+                    };
+                };
+            };
+            stepperGroup: {
+                borderLeft: string;
+                borderColor: string;
+                width: string;
+                ".chakra-numberinput__field:focus + &": {
+                    borderLeftColor: string;
+                };
+                ".chakra-numberinput__field[aria-invalid=true] + &": {
+                    borderLeftColor: string;
+                };
+                ".chakra-numberinput__field[disabled] + &": {
+                    borderLeftColor: string;
+                };
+                "& > *": {
+                    borderColor: string;
+                    borderBottom: string;
+                };
+                "& > :first-of-type": {
+                    borderBottom: string;
+                };
+            };
+        };
+    };
+    defaultProps?: {
+        size?: "sm" | "lg";
+        variant?: "outline";
+        colorScheme?: string;
+    };
+    parts: ("root" | "field" | "stepperGroup" | "stepper")[];
+};
+export default numberInputTheme;
+//# sourceMappingURL=inputNumber.d.ts.map

package/dist/types/src/theme/cruk/components/inputNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/inputNumber.ts"],"names":[],"mappings":"AA4IA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAU3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/types/src/theme/cruk/components/inputTextArea.d.ts

@@ -0,0 +1,57 @@
+declare const textAreaTheme: {
+    baseStyle?: (props: import("@chakra-ui/react").StyleFunctionProps) => {
+        fontFamily: string;
+        fontSize: {
+            base: "text.sm";
+            lg: "text.md";
+        };
+        borderColor: string;
+        borderRadius: string;
+        cursor: string;
+        padding: string;
+        minHeight: string;
+        _hover: {
+            boxShadow: string;
+            border: number;
+            transition: string;
+            padding: string;
+        };
+        _focus: {
+            "&.chakra-textarea": {
+                _focus: {
+                    border: string;
+                    borderColor: string;
+                    boxShadow: string;
+                    padding: string;
+                };
+            };
+        };
+        _disabled: {
+            backgroundColor: string;
+            border: string;
+        };
+        _invalid: {
+            "&.chakra-textarea": {
+                border: string;
+                boxShadow: string;
+                padding: string;
+                _focus: {
+                    borderColor: string;
+                };
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+};
+export default textAreaTheme;
+//# sourceMappingURL=inputTextArea.d.ts.map

package/dist/types/src/theme/cruk/components/inputTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputTextArea.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/inputTextArea.ts"],"names":[],"mappings":"AA0DA,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/dist/types/src/theme/cruk/components/link.d.ts

@@ -92,7 +92,7 @@ export declare const linkTheme: {
         };
     };
     defaultProps?: {
-        size?: "md" | "sm";
+        size?: "sm" | "md";
         variant?: "altInline" | "file" | "navigation" | "navigationAlt" | "footer" | "reference";
         colorScheme?: string;
     };

package/dist/types/src/theme/cruk/components/list.d.ts

@@ -10,7 +10,7 @@ declare const listTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: ("container" | "icon" | "item")[];
         }>;
     };

package/dist/types/src/theme/cruk/components/loader.d.ts

@@ -1,7 +1,7 @@
 declare const loaderTheme: {
-    baseStyle?: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    baseStyle?: import("@chakra-ui/react").SystemStyleInterpolation;
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
     };
     variants?: {
         cruk: {

package/dist/types/src/theme/cruk/components/logoGroup.d.ts

@@ -22,10 +22,10 @@ export declare const logoGroupTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
     };
     variants?: {
-        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+        [key: string]: import("@chakra-ui/react").SystemStyleInterpolation;
     };
     defaultProps?: {
         size?: string | number;

package/dist/types/src/theme/cruk/components/paymentIconsGroup.d.ts

@@ -9,12 +9,12 @@ declare const paymentIconsGroupTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: "iconContainer"[];
         }>;
     };
     variants?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: "iconContainer"[];
         }>;
     };

package/dist/types/src/theme/cruk/components/popover.d.ts

@@ -80,14 +80,60 @@ declare const popoverTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: ("header" | "closeButton" | "body" | "footer" | "content" | "popper" | "arrow")[];
         }>;
     };
-    variants?: {};
+    variants?: {
+        secondary: {
+            content: {
+                "--popper-arrow-size": string;
+                backgroundColor: string;
+                border: string;
+                borderLeft: string;
+                borderColor: string;
+                _focus: {
+                    boxShadow: string;
+                };
+                padding: number;
+                width: string;
+                maxWidth: {
+                    base: "350px";
+                    md: "450px";
+                    lg: "550px";
+                };
+            };
+            arrow: {
+                border: string;
+                backgroundColor: string;
+                borderColor: string;
+                "--popper-arrow-default-shadow": string;
+            };
+            header: {};
+            body: {
+                backgroundColor: string;
+                width: string;
+                maxWidth: {
+                    base: "350px";
+                    md: "450px";
+                    lg: "550px";
+                };
+                a: {
+                    _visited: {
+                        color: string;
+                    };
+                    _hover: {
+                        color: string;
+                    };
+                    color: string;
+                };
+            };
+            closeButton: {};
+        };
+    };
     defaultProps?: {
         size?: string | number;
-        variant?: never;
+        variant?: "secondary";
         colorScheme?: string;
     };
     parts: ("header" | "closeButton" | "body" | "footer" | "content" | "popper" | "arrow")[];

package/dist/types/src/theme/cruk/components/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/popover.ts"],"names":[],"mappings":"AA6EA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGhB,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/cruk/components/popover.ts"],"names":[],"mappings":"AA6EA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqChB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/types/src/theme/cruk/components/progress.d.ts

@@ -18,7 +18,7 @@ declare const progressTheme: {
         };
     };
     sizes?: {
-        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
             keys: ("label" | "track" | "filledTrack")[];
         }>;
     };