@hhgtech/hhg-components 1.29.80 → 1.29.81

package/build/esm/constants-6bdb97a8.js

@@ -0,0 +1,417 @@
+import { _ as __rest } from './tslib.es6-761239c7.js';
+import React__default, { createContext, useContext } from 'react';
+import { createStyles, rem, Box, Input, Chip, useMantineTheme, Flex, Switch } from '@mantine/core';
+import { T as Text } from './index-c200bff6.js';
+import { B as Button } from './index-2b9213cf.js';
+import { u as useTranslations } from './useTranslations-fbf6a6ab.js';
+import flattenChildren from 'react-keyed-flatten-children';
+import { t as theme } from './theme-f18c2351.js';
+
+var useStyles$8 = createStyles(() => {
+    return {
+        root: {
+            justifyContent: 'flex-start',
+        },
+        group: {
+            display: 'flex',
+            alignItems: 'stretch',
+            gap: rem(8),
+        },
+        item: {
+            flex: '1 1 0px',
+        },
+        icon: {
+            flexShrink: 0,
+        },
+    };
+});
+
+const ChipGroup = (_a) => {
+    var { data = [], label, isMobile, layout = 'horizonal', classNames, styles } = _a, props = __rest(_a, ["data", "label", "isMobile", "layout", "classNames", "styles"]);
+    const { classes, theme } = useStyles$8(undefined, {
+        name: 'ChipGroup',
+        classNames,
+        styles,
+    });
+    const isMarryBaby = theme.other.template === 'mb';
+    const iconSize = isMobile
+        ? 48
+        : isMarryBaby
+            ? 32
+            : layout === 'vertical'
+                ? 32
+                : 18;
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Input.Wrapper, { label: label },
+            React__default.createElement(Chip.Group, Object.assign({}, props),
+                React__default.createElement(Box, { className: classes.group }, data.map((i, idx) => (React__default.createElement(Chip, { className: classes.item, key: idx, value: String(i.value), styles: {
+                        iconWrapper: {
+                            display: 'none',
+                        },
+                        label: {
+                            width: '100%',
+                            borderRadius: rem(isMarryBaby ? 12 : 8),
+                            padding: 0,
+                            border: `1px solid ${isMarryBaby ? '#EAEAEC' : theme.colors.neutral[2]}`,
+                            height: '100%',
+                            '&[data-checked]': {
+                                padding: 0,
+                                backgroundColor: isMarryBaby
+                                    ? '#FFE9F1'
+                                    : theme.colors.blue[0],
+                                border: `1px solid ${isMarryBaby ? '#F5B4CB' : theme.colors.blue[1]}`,
+                            },
+                            [theme.fn.smallerThan('sm')]: {
+                                alignItems: 'flex-start',
+                            },
+                        },
+                    } },
+                    React__default.createElement(Box, { sx: Object.assign(Object.assign(Object.assign({ width: '100%', display: 'flex', gap: rem(isMarryBaby ? 2 : 8), padding: '8px 16px 8px 12px', justifyContent: 'center', alignItems: 'center' }, (isMarryBaby && {
+                            flexDirection: 'column',
+                        })), (layout === 'vertical' && {
+                            flexDirection: 'column',
+                            padding: '16px 8px 8px',
+                        })), { [theme.fn.smallerThan('sm')]: {
+                                flexDirection: 'column',
+                                padding: '16px 8px 8px',
+                            } }) },
+                        React__default.isValidElement(i.icon)
+                            ? React__default.cloneElement(i.icon, {
+                                size: iconSize,
+                                isMarryBaby,
+                                className: classes.icon,
+                            })
+                            : null,
+                        React__default.createElement(Text, { size: 'p4', styles: {
+                                root: Object.assign(Object.assign({}, (isMarryBaby && {
+                                    textAlign: 'center',
+                                })), { whiteSpace: 'normal', [theme.fn.smallerThan('sm')]: {
+                                        fontSize: rem(12),
+                                        lineHeight: rem(18),
+                                        textAlign: 'center',
+                                    } }),
+                            } }, i.label))))))))));
+};
+
+const FormLayoutContext = createContext({});
+
+const useStyles$7 = createStyles(() => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+    };
+});
+const FormRow = (_a) => {
+    var { styles, classNames, className, children } = _a, props = __rest(_a, ["styles", "classNames", "className", "children"]);
+    const { classes, cx } = useStyles$7(undefined, {
+        name: 'HealthToolFormWrapper__FormRow',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, props), children));
+};
+
+var useStyles$6 = createStyles((theme, { formLayout }) => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(formLayout === 'inline' ? 8 : 16),
+            '.mantine-Input-input::placeholder, .mantine-Input-input[data-invalid]::placeholder': {
+                color: '#8C8C8C',
+            },
+        },
+        control: {
+            width: rem(180),
+            flexShrink: 1,
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+    };
+});
+
+const useStyles$5 = createStyles((theme, { formLayout }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: Object.assign(Object.assign({ minWidth: rem(180) }, (formLayout === 'inline' && {
+            alignSelf: 'flex-end',
+            marginTop: rem(16),
+        })), (formLayout === 'default' && Object.assign({}, (isMarryBaby && {
+            alignSelf: 'center',
+        })))),
+    };
+});
+const SubmitBtn = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { formLayout } = useContext(FormLayoutContext);
+    const { classes, cx } = useStyles$5({ formLayout }, {
+        name: 'HealthToolFormWrapper__SubmitBtn',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Button, Object.assign({ className: cx('submit-btn', className, classes.root) }, props, { variant: "primary", size: "md" })));
+};
+
+const Switching = (_a) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    const { t } = useTranslations();
+    const theme = useMantineTheme();
+    const isMarryBaby = theme.other.template === 'mb';
+    return (React__default.createElement(Flex, { gap: rem(4), sx: () => ({
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        }) },
+        label && (React__default.createElement(Text, { size: isMarryBaby ? 'p4' : 's4', color: "gray.6" }, label)),
+        React__default.createElement(Switch, Object.assign({ labelPosition: "left", onLabel: t('switchBtn.yes'), offLabel: t('switchBtn.no') }, props, { styles: (theme) => ({
+                trackLabel: {
+                    fontSize: rem(12),
+                },
+                track: {
+                    cursor: 'pointer',
+                },
+                body: {
+                    [theme.fn.largerThan('sm')]: {
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                    },
+                    [theme.fn.smallerThan('sm')]: {
+                        justifyContent: 'space-between',
+                    },
+                },
+                labelWrapper: {
+                    [theme.fn.smallerThan('sm')]: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                    },
+                },
+            }) }))));
+};
+
+const useStyles$4 = createStyles((theme) => {
+    return {
+        root: {
+            color: theme.colors.gray[6],
+            whiteSpace: 'nowrap',
+            paddingRight: rem(16),
+        },
+    };
+});
+const Unit = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$4(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles$3 = createStyles(() => {
+    return {
+        root: {
+            display: 'flex',
+            gap: rem(8),
+            border: '1px solid #EAEAEC',
+            borderRadius: rem(16),
+            padding: '10px 16px 12px 16px',
+            flex: '1 1 0px',
+            '.mantine-Input-input': {
+                border: 0,
+                paddingLeft: 0,
+                height: '22px',
+                borderRadius: 0,
+                '&:focus': {
+                    outline: 0,
+                    boxShadow: 'none',
+                },
+            },
+        },
+        info: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0,
+            flex: '1 1 0px',
+        },
+        label: {
+            color: '#7C7C8F',
+            fontWeight: 'normal',
+        },
+        content: {},
+        rightSection: {
+            display: 'flex',
+            alignItems: 'center',
+            textTransform: 'lowercase',
+            color: '#3E3F58',
+        },
+    };
+});
+
+const BorderBoxControl = (_a) => {
+    var { label, rightSection, children, styles, className, classNames } = _a, props = __rest(_a, ["label", "rightSection", "children", "styles", "className", "classNames"]);
+    const { classes, cx } = useStyles$3(undefined, {
+        name: 'HealthToolFormWrapper__BorderBoxControl',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, Object.assign({ className: cx(classes.root, className) }, props),
+        React__default.createElement(Box, { className: classes.info },
+            label && (React__default.createElement(Text, { size: "n1", as: "label", className: classes.label }, label)),
+            React__default.createElement(Box, { className: classes.content }, React__default.isValidElement(children)
+                ? React__default.cloneElement(children, Object.assign(Object.assign({}, children.props), { size: 'sm', error: null }))
+                : null)),
+        rightSection && (React__default.createElement(Box, { className: classes.rightSection }, typeof rightSection === 'string' ? (React__default.createElement(Text, { size: "p4" }, rightSection)) : React__default.isValidElement(rightSection) ? (React__default.cloneElement(rightSection, {
+            size: 24,
+        })) : null))));
+};
+
+var useStyles$2 = createStyles((theme, { width, direction }) => {
+    const isMarryBaby = theme.other.template === 'mb';
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: rem(8),
+        },
+        row: {
+            display: 'flex',
+            flexDirection: direction,
+            alignItems: 'stretch',
+            justifyContent: 'space-between',
+            gap: rem(16),
+            minHeight: rem(40),
+        },
+        labelWrapper: Object.assign({ flex: '1 1 0px', display: 'flex', alignItems: 'center' }, (direction === 'row' && {
+            borderBottom: `1px solid ${theme.colors.neutral[1]}`,
+        })),
+        label: {
+            fontSize: rem(14),
+            color: theme.colors.gray[6],
+        },
+        content: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: rem(8),
+            input: {
+                backgroundColor: '#fff',
+            },
+        },
+        control: {
+            width: typeof width === 'number' ? rem(width) : width,
+            flexShrink: 1,
+            input: Object.assign({}, (isMarryBaby && {
+                borderRadius: rem(12),
+            })),
+            '&.error': {
+                'button, input': {
+                    borderColor: theme.colors.red[7],
+                },
+            },
+        },
+        error: {
+            color: 'red',
+            textAlign: 'right',
+        },
+    };
+});
+
+const BorderInlineControl = ({ label, children, styles, classNames, direction = 'row', width = 180, errorMess, }) => {
+    const { classes } = useStyles$2({ width, direction }, {
+        name: 'HealthToolFormWrapper__BorderInlineControl',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(Box, { className: classes.root },
+        React__default.createElement(Box, { className: classes.row },
+            React__default.createElement(Box, { className: classes.labelWrapper }, label && (React__default.createElement("label", { className: classes.label, htmlFor: "gender" }, label))),
+            React__default.createElement(Box, { className: classes.content }, flattenChildren(children).map((i, idx) => (React__default.createElement(Box, { key: idx, className: classes.control }, i))))),
+        errorMess && (React__default.createElement(Text, { size: "p4", className: classes.error }, errorMess))));
+};
+
+const useStyles$1 = createStyles(() => {
+    return {
+        root: {
+            color: 'red',
+            textAlign: 'right',
+            width: 'auto',
+        },
+    };
+});
+const Error = (_a) => {
+    var { styles, classNames, className } = _a, props = __rest(_a, ["styles", "classNames", "className"]);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'HealthToolFormWrapper__UnitText',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Text, Object.assign({ size: "p4", className: cx(className, classes.root) }, props));
+};
+
+var useStyles = createStyles((theme$1) => {
+    const isMarryBaby = theme$1.other.template === 'mb';
+    return {
+        root: {
+            label: Object.assign({}, (isMarryBaby && {
+                color: theme.mbColors.midGray,
+                fontSize: rem(12),
+                fontWeight: 'normal',
+            })),
+        },
+    };
+});
+
+const Control = (_a) => {
+    var { className, styles, classNames } = _a, rest = __rest(_a, ["className", "styles", "classNames"]);
+    const { classes, cx } = useStyles(undefined, {
+        name: 'HealthToolFormWrapper__Control',
+        styles,
+        classNames,
+    });
+    return React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest));
+};
+
+const _HealthToolFormWrapper = (_a) => {
+    var { children, formLayout: formLayoutProp, styles, classNames, className, component = 'form' } = _a, rest = __rest(_a, ["children", "formLayout", "styles", "classNames", "className", "component"]);
+    const formLayout = formLayoutProp || 'default';
+    const { classes, cx } = useStyles$6({ formLayout }, {
+        name: 'HealthToolFormWrapper',
+        styles,
+        classNames,
+    });
+    return (React__default.createElement(FormLayoutContext.Provider, { value: {
+            formLayout,
+        } },
+        React__default.createElement(Box, Object.assign({ component: component, className: cx(className, classes.root) }, rest), children)));
+};
+const HealthToolFormWrapper = _HealthToolFormWrapper;
+HealthToolFormWrapper.Control = Control;
+HealthToolFormWrapper.BorderInlineControl = BorderInlineControl;
+HealthToolFormWrapper.BorderBoxControl = BorderBoxControl;
+HealthToolFormWrapper.Error = Error;
+HealthToolFormWrapper.FormRow = FormRow;
+HealthToolFormWrapper.Submit = SubmitBtn;
+HealthToolFormWrapper.Unit = Unit;
+HealthToolFormWrapper.Switching = Switching;
+HealthToolFormWrapper.ChipGroup = ChipGroup;
+
+const INPUT_RANGE = {
+    height: {
+        min: 1,
+        max: 300,
+    },
+    weight: {
+        min: 1,
+        max: 200,
+    },
+    pregnantWeek: {
+        min: 1,
+        max: 40,
+    },
+};
+
+export { HealthToolFormWrapper as H, INPUT_RANGE as I };