{"version":3,"file":"input.mjs","sources":["../../../../src/components/commons/input.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport type {\n    ChangeEventHandler,\n    FunctionComponent,\n    InputHTMLAttributes,\n    ReactElement,\n    ReactNode,\n} from \"react\";\nimport Info from \"../../icons/info\";\nimport { mergedCva } from \"../../utils/components\";\nimport { ErrorText } from \"../error-text\";\nimport { Typography, type TypographyProps } from \"../typography\";\nimport { Popover } from \"../popover\";\n\nexport interface PartialBaseInputProps<V> {\n    error?: boolean;\n    errorText?: string;\n    variant?: \"xs\" | \"sm\" | \"base\" | \"xl\" | \"2xl\";\n    placeholder?: string;\n    loading?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    value?: V | null;\n    border?: boolean;\n}\n\nexport type BaseInputProps<V> = PartialBaseInputProps<V> &\n    BaseInputWrapperProps &\n    Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        keyof PartialBaseInputProps<V> | keyof BaseInputWrapperProps | \"ref\"\n    >;\n\nconst inputWrapperStyles = mergedCva([\"cui-w-fit\", \"cui-relative\"]);\n\nconst inputIconWrapperStyles = mergedCva(\n    [\n        \"cui-absolute\",\n        \"cui-top-0\",\n        \"cui-h-full\",\n        \"cui-w-12\",\n        \"cui-flex\",\n        \"cui-justify-center\",\n        \"cui-items-center\",\n        \"cui-pointer-events-none\",\n    ],\n    {\n        variants: {\n            placement: {\n                left: [\"cui-left-0\"],\n                right: [\"cui-right-0\"],\n            },\n        },\n    },\n);\n\nconst inputActionWrapperStyles = mergedCva(\n    [\n        \"cui-absolute\",\n        \"cui-top-0\",\n        \"cui-h-full\",\n        \"cui-flex\",\n        \"cui-justify-center\",\n        \"cui-items-center\",\n    ],\n    {\n        variants: {\n            placement: {\n                left: [\"cui-left-0\"],\n                right: [\"cui-right-0\"],\n            },\n        },\n    },\n);\n\nexport const inputIconStyles = mergedCva([\n    \"cui-w-5\",\n    \"cui-text-black\",\n    \"dark:cui-text-white\",\n]);\n\nexport const inputStyles = mergedCva(\n    [\n        \"cui-rounded-xxl\",\n        \"cui-p-3\",\n        \"cui-font-mono\",\n        \"cui-font-normal\",\n        \"focus:cui-outline-none\",\n        \"cui-placeholder-opacity-20\",\n        \"dark:cui-placeholder-opacity-30\",\n        \"cui-text-black\",\n        \"dark:cui-text-white\",\n        \"cui-border\",\n    ],\n    {\n        variants: {\n            variant: {\n                xs: [\"cui-text-xs\"],\n                sm: [\"cui-text-sm\"],\n                base: [\"cui-text-base\"],\n                xl: [\"cui-text-xl\"],\n                \"2xl\": [\"cui-text-2xl\"],\n            },\n            border: {\n                true: [\n                    \"cui-border-black\",\n                    \"dark:cui-border-white\",\n                    \"focus:cui-border-orange\",\n                    \"dark:focus:cui-border-orange\",\n                    \"cui-bg-transparent\",\n                ],\n                false: [\n                    \"cui-border-gray-200\",\n                    \"cui-bg-gray-200\",\n                    \"dark:cui-border-gray-700\",\n                    \"dark:cui-bg-gray-700\",\n                ],\n            },\n            error: {\n                true: [\"cui-bg-red/20\"],\n            },\n            hasLeftIcon: {\n                true: [\"cui-pl-12\"],\n            },\n            loading: {\n                true: [\n                    \"cui-bg-gray-200 dark:cui-bg-gray-600 cui-animate-pulse\",\n                ],\n            },\n        },\n        compoundVariants: [\n            {\n                border: false,\n                error: true,\n                className: [\"cui-border-transparent\"],\n            },\n        ],\n        defaultVariants: { variant: \"base\", border: true },\n    },\n);\n\nconst labelStyles = mergedCva([\n    \"cui-flex\",\n    \"cui-items-center\",\n    \"cui-gap-1.5\",\n    \"cui-w-fit\",\n    \"cui-mb-1.5\",\n]);\n\nexport const infoIconStyles = mergedCva([\n    \"cui-w-4\",\n    \"cui-h-4\",\n    \"cui-text-black\",\n    \"dark:cui-text-white\",\n]);\n\nexport interface BaseInputWrapperProps {\n    id: string;\n    label?: string;\n    variant?: \"xs\" | \"sm\" | \"base\" | \"xl\" | \"2xl\";\n    error?: boolean;\n    border?: boolean;\n    errorText?: string;\n    info?: ReactNode;\n    icon?: FunctionComponent<React.SVGProps<SVGSVGElement>>;\n    iconPlacement?: \"left\" | \"right\";\n    action?: ReactNode;\n    actionPlacement?: \"left\" | \"right\";\n    className?: {\n        root?: string;\n        label?: string;\n        labelText?: TypographyProps[\"className\"];\n        infoIcon?: string;\n        infoPopover?: string;\n        errorTextContainer?: string;\n        errorTextIcon?: string;\n        errorText?: TypographyProps[\"className\"];\n        // should be applied when using the wrapper\n        inputIcon?: string;\n        inputIconWrapper?: string;\n        inputActionWrapper?: string;\n        inputWrapper?: string;\n        input?: string;\n    };\n    children?: ReactNode;\n}\n\nexport const BaseInputWrapper = ({\n    id,\n    label,\n    error,\n    errorText,\n    info,\n    icon: Icon,\n    iconPlacement = \"right\",\n    action: Action,\n    actionPlacement = \"right\",\n    className,\n    children,\n}: BaseInputWrapperProps): ReactElement => {\n    const [infoIcon, setInfoIcon] = useState<HTMLDivElement | null>(null);\n    const [infoPopoverOpen, setInfoPopoverOpen] = useState(false);\n\n    const handleInfoMouseEnter = useCallback(() => {\n        setInfoPopoverOpen(true);\n    }, []);\n\n    const handleInfoMouseExit = useCallback(() => {\n        setInfoPopoverOpen(false);\n    }, []);\n\n    const icon = !Action && Icon && (\n        <div\n            className={inputIconWrapperStyles({\n                className: className?.inputIconWrapper,\n                placement: iconPlacement,\n            })}\n        >\n            <Icon\n                className={inputIconStyles({\n                    className: className?.inputIcon,\n                })}\n            />\n        </div>\n    );\n\n    const action = Action && (\n        <div\n            className={inputActionWrapperStyles({\n                className: className?.inputActionWrapper,\n                placement: iconPlacement,\n            })}\n        >\n            {Action}\n        </div>\n    );\n\n    return (\n        <div className={className?.root}>\n            {!!label && (\n                <label\n                    className={labelStyles({ className: className?.label })}\n                    htmlFor={id}\n                >\n                    <Typography\n                        variant=\"xs\"\n                        weight=\"medium\"\n                        className={className?.labelText}\n                    >\n                        {label}\n                    </Typography>\n                    {info && (\n                        <>\n                            <div ref={setInfoIcon}>\n                                <Info\n                                    className={infoIconStyles({\n                                        className: className?.infoIcon,\n                                    })}\n                                    onMouseEnter={handleInfoMouseEnter}\n                                    onMouseLeave={handleInfoMouseExit}\n                                />\n                            </div>\n                            <Popover\n                                anchor={infoIcon}\n                                open={infoPopoverOpen}\n                                className={{\n                                    root: `cui-p-2 ${className?.infoPopover}`,\n                                }}\n                            >\n                                {info}\n                            </Popover>\n                        </>\n                    )}\n                </label>\n            )}\n            <div\n                className={inputWrapperStyles({\n                    className: className?.inputWrapper,\n                })}\n            >\n                {iconPlacement === \"left\" && icon}\n                {actionPlacement === \"left\" && action}\n                {children}\n                {iconPlacement === \"right\" && icon}\n                {actionPlacement === \"right\" && action}\n            </div>\n            {error && errorText && <ErrorText>{errorText}</ErrorText>}\n        </div>\n    );\n};\n"],"names":["React"],"mappings":"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"}