@fidely-ui/react/dist/components/float-input/float-input.js

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cx } from '@fidely-ui/styled-system/css';
import { floatLabel } from '@fidely-ui/styled-system/recipes';
import { Box } from '../box/index';
import { Field } from '../field/index';
import { Input } from '../input/index';
export const FloatInput = React.forwardRef(function FloatInput(props, ref) {
    const { label, value, onBlur, onFocus, className, ...rest } = props;
    const [focused, setFocused] = React.useState(false);
    const isFloating = focused || Boolean(value && value.length > 0);
    const inputSize = rest.size ?? 'md';
    return (_jsxs(Box, { position: "relative", width: "100%", children: [_jsx(Input, { ref: ref, value: value, onFocus: (e) => {
                    setFocused(true);
                    onFocus?.(e);
                }, onBlur: (e) => {
                    setFocused(false);
                    onBlur?.(e);
                }, ...rest }), _jsx(Field.Label, { className: cx(floatLabel({ float: isFloating, size: inputSize }), className), children: label })] }));
});
FloatInput.displayName = 'FloatInput';