Absolute Framework

import React from 'react'
import { callAll, isFunction, isDefined } from '../utils'

const InputContext = React.createContext()
InputContext.displayName = 'InputContext'
export const useInput = () => React.useContext(InputContext)

export const Root = React.forwardRef((props, inputRef) => {
    const {
        children,
        initialValue,
        value: controlledValue,
        onChange: providedOnChange,
        onClear: providedOnClear,
        ...rest
    } = props
    const [_value, setValue] = React.useState(initialValue)
    const isControlled = isDefined(controlledValue)

    const value = isControlled ? controlledValue : _value

    const inputId = React.useId()
    const helperId = React.useId()
    const errorMessageId = React.useId()
    const [showPassword, setShowPassword] = React.useState(false)

    const onChange = React.useCallback(
        (event) => {
            if (isControlled) return
            const { value } = event.target
            setValue(value)
        },
        [isControlled]
    )

    const onClear = React.useCallback(() => {
        if (isControlled) return
        setValue('')
    }, [isControlled])

    const inputProps = {
        value,
        onChange: callAll(onChange, providedOnChange),
        id: inputId,
        'aria-describedby': helperId,
        'aria-errormessage': errorMessageId,
        ...rest,
    }

    return (
        <InputContext.Provider
            value={{
                inputProps,
                inputRef,
                inputId,
                onClear: callAll(onClear, providedOnClear),
                helperId,
                errorMessageId,
                showPassword,
                setShowPassword,
            }}
        >
            {children}
        </InputContext.Provider>
    )
})

export const Label = React.forwardRef((props, ref) => {
    const { children, htmlFor: providedHtmlFor, ...rest } = props
    const { inputId } = useInput()
    const htmlFor = providedHtmlFor || inputId
    return (
        <label ref={ref} htmlFor={htmlFor} {...rest}>
            {children}
        </label>
    )
})

export function Field(props) {
    const { className } = props
    const { inputProps, inputRef, showPassword } = useInput()
    const { type, autoComplete, ...rest } = inputProps

    const innerRef = React.useRef(null)
    React.useImperativeHandle(inputRef, () => innerRef.current)

    const _type = showPassword ? 'text' : type
    const _autoComplete = type === 'password' ? 'off' : autoComplete

    // Set `type` to `"password"` programmatically when submitting
    React.useEffect(() => {
        if (type !== 'password') return
        const input = innerRef.current
        const form = input?.form
        if (!input || !form) return
        const onSubmit = () => input.setAttribute('type', 'password')
        form.addEventListener('submit', onSubmit)
        return () => {
            form.removeEventListener('submit', onSubmit)
        }
    }, [type])

    return (
        <input
            className={className}
            ref={innerRef}
            type={_type}
            autoComplete={_autoComplete}
            {...rest}
        />
    )
}

export const ShowPasswordButton = React.forwardRef((props, ref) => {
    const { onClick: providedOnClick, children, ...rest } = props
    const { inputId, showPassword, setShowPassword } = useInput()

    const onClick = React.useCallback(() => {
        setShowPassword((p) => !p)
    }, [setShowPassword])

    return (
        <button
            {...rest}
            ref={ref}
            aria-controls={inputId}
            onClick={callAll(providedOnClick, onClick)}
            type="button"
        >
            {isFunction(children) && children(showPassword)}
            {!isFunction(children) && children}
        </button>
    )
})

export const ClearButton = React.forwardRef((props, ref) => {
    const { onClick: providedOnClick, ...rest } = props
    const { onClear } = useInput()

    return (
        <button
            ref={ref}
            onClick={callAll(providedOnClick, onClear)}
            type="button"
            {...rest}
        />
    )
})

export const Helper = React.forwardRef((props, ref) => {
    const { as = 'p', id: providedId, children, ...rest } = props
    const context = useInput()
    const id = providedId || context.helperId

    return React.createElement(
        as,
        {
            ref,
            id,
            ...rest,
        },
        children
    )
})

export const ErrorMessage = React.forwardRef((props, ref) => {
    const { as = 'p', id: providedId, ...rest } = props
    const context = useInput()
    const id = providedId || context.errorMessageId

    return React.createElement(as, {
        id,
        ref,
        ...rest,
    })
})

Root.displayName = 'Root'
Label.displayName = 'Label'
Helper.displayName = 'Helper'
ShowPasswordButton.displayName = 'ShowPasswordButton'
ClearButton.displayName = 'ClearButton'
ErrorMessage.displayName = 'ErrorMessage'

import React from 'react'
import * as BaseInput from './base-input'
import Heroicon from '../../heroicon'
import { StarLine } from './star-line/star-line'

export const Root = React.forwardRef((props, ref) => {
    const { children, ...rest } = props

    return (
        <BaseInput.Root ref={ref} {...rest}>
            <div className="relative isolate flex items-center rounded-b-[px] rounded-t-md bg-slate-950 text-base">
                {children}
                <StarLine className="absolute inset-x-0 bottom-0 w-full" />
            </div>
        </BaseInput.Root>
    )
})
Root.displayName = 'Root'

export function Label(props) {
    const { children, ...rest } = props

    return (
        <BaseInput.Label className="px-3 py-2 text-slate-400" {...rest}>
            {children}
        </BaseInput.Label>
    )
}

export function Field(props) {
    return (
        <BaseInput.Field
            className="ml-auto w-0 flex-grow border-none bg-transparent px-3 py-2 text-right text-white placeholder:bg-slate-500 placeholder:bg-transparent placeholder:text-slate-500"
            {...props}
        />
    )
}

export function ClearButton(props) {
    return (
        <BaseInput.ClearButton
            className="px-3 py-2.5 text-slate-100"
            {...props}
        >
            <Heroicon id="mini/x-mark" />
            <span className="sr-only">Clear contents</span>
        </BaseInput.ClearButton>
    )
}

export function SimpleInput(props) {
    const { label, clearButton = false, ...rest } = props
    return (
        <Root {...rest}>
            {label && <Label>Birthday</Label>}
            <Field />
            {clearButton && <ClearButton />}
        </Root>
    )
}

import React from 'react'
import * as BaseInput from './base-input'
import Heroicon from '../../heroicon'
import { StarLine } from './star-line/star-line'

export const Root = React.forwardRef((props, ref) => {
    const { children, ...rest } = props

    return (
        <BaseInput.Root ref={ref} {...rest}>
            <div className="relative isolate flex items-center rounded-b-[px] rounded-t-md bg-slate-950 text-base">
                {children}
                <StarLine className="absolute inset-x-0 bottom-0 w-full" />
            </div>
        </BaseInput.Root>
    )
})
Root.displayName = 'Root'

export function Label(props) {
    const { children, ...rest } = props

    return (
        <BaseInput.Label className="px-3 py-2 text-slate-400" {...rest}>
            {children}
        </BaseInput.Label>
    )
}

export function Field(props) {
    return (
        <BaseInput.Field
            className="ml-auto w-0 flex-grow border-none bg-transparent px-3 py-2 text-right text-white placeholder:bg-slate-500 placeholder:bg-transparent placeholder:text-slate-500"
            {...props}
        />
    )
}

export function ClearButton(props) {
    return (
        <BaseInput.ClearButton
            className="px-3 py-2.5 text-slate-100"
            {...props}
        >
            <Heroicon id="mini/x-mark" />
            <span className="sr-only">Clear contents</span>
        </BaseInput.ClearButton>
    )
}

export function SimpleInput(props) {
    const { label, clearButton = false, ...rest } = props
    return (
        <Root {...rest}>
            {label && <Label>Birthday</Label>}
            <Field />
            {clearButton && <ClearButton />}
        </Root>
    )
}