@vertisanpro/flowbite-react/lib/src/components/FloatingLabel/FloatingLabel.js

Non-Official React components built for Flowbite and Tailwind CSS

import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { forwardRef, useMemo } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
export const FloatingLabel = forwardRef(({ label, helperText, color = 'default', sizing = 'md', variant, disabled = false, theme: customTheme = {}, className, ...props }, ref) => {
    const randomId = useMemo(() => nanoid(), []);
    const theme = mergeDeep(getTheme().floatingLabel, customTheme);
    return (React.createElement("div", null,
        React.createElement("div", { className: twMerge('relative', variant === 'standard' ? 'z-0' : '') },
            React.createElement("input", { type: "text", id: props.id ? props.id : 'floatingLabel' + randomId, "aria-describedby": "outlined_success_help", className: twMerge(theme.input[color][variant][sizing], className), placeholder: " ", "data-testid": "floating-label", disabled: disabled, ...props, ref: ref }),
            React.createElement("label", { htmlFor: props.id ? props.id : 'floatingLabel' + randomId, className: twMerge(theme.label[color][variant][sizing], className) }, label)),
        React.createElement("p", { id: 'outlined_helper_text' + randomId, className: twMerge(theme.helperText[color], className) }, helperText)));
});
FloatingLabel.displayName = 'FloatingLabel';