@heymarco/next-auth/dist/components/InputWithLabel.js

A complete authentication solution for web applications.

// react:
import { 
// react:
default as React, } from 'react';
// reusable-ui core:
import { 
// react helper hooks:
useMergeRefs, useMergeClasses, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { Icon, Label, Input, Group, } from '@reusable-ui/components'; // a set of official Reusable-UI components
const InputWithLabel = (props) => {
    // rest props:
    const { 
    // refs:
    elmRef, outerRef, 
    // identifiers:
    id, 
    // appearances:
    icon, 
    // variants:
    size, theme, gradient, outlined, mild, 
    // classes:
    mainClass, classes, variantClasses, stateClasses, className, 
    // styles:
    style, 
    // accessibilities:
    'aria-label': ariaLabel, title, 
    // components:
    inputComponent = React.createElement(Input, null), groupComponent = React.createElement(Group, null), labelComponent = React.createElement(Label, null), iconComponent = React.createElement(Icon, { icon: icon }), ...restInputProps } = props;
    // refs:
    const mergedElmRef = useMergeRefs(
    // preserves the original `elmRef` from `inputComponent`:
    inputComponent.props.elmRef, 
    // preserves the original `elmRef` from `props`:
    elmRef);
    // classes:
    const allClasses = [
        ...(inputComponent.props.className ?? '').split(' '),
        ...(inputComponent.props.classes ?? []),
    ];
    const isSolidOrFluid = allClasses.includes('solid') || allClasses.includes('fluid');
    const mergedClasses = useMergeClasses(
    // preserves the original `classes` from `inputComponent`:
    inputComponent.props.classes, 
    // preserves the original `classes` from `props`:
    props.classes, 
    // classes:
    (isSolidOrFluid ? null : 'fluid'));
    // jsx:
    /* <Group> */
    return React.cloneElement(groupComponent, 
    // props:
    {
        // refs:
        outerRef,
        // identifiers:
        id,
        // variants:
        size,
        theme,
        gradient,
        outlined,
        mild,
        // classes:
        mainClass,
        classes,
        variantClasses,
        stateClasses,
        className,
        // styles:
        style,
        // accessibilities:
        'aria-label': ariaLabel,
    }, 
    // children:
    /* <Label> */
    React.cloneElement(labelComponent, 
    // props:
    {
        // classes:
        className: labelComponent.props.className ?? 'solid',
        // accessibilities:
        title: labelComponent.props.title ?? title,
    }, 
    // children:
    /* <Icon> */
    React.cloneElement(iconComponent, 
    // props:
    {
        // appearances:
        icon: iconComponent.props.icon ?? icon,
    })), 
    /* <Input> */
    React.cloneElement(inputComponent, 
    // props:
    {
        // other props:
        ...restInputProps,
        ...inputComponent.props, // overwrites restInputProps (if any conflics)
        // refs:
        elmRef: mergedElmRef,
        // classes:
        classes: mergedClasses,
    }));
};
export { InputWithLabel, InputWithLabel as default, };