@react-three/uikit-default/dist/textarea.js

Default (shadcn) kit for @react-three/uikit

import { Container, DefaultProperties, Input as InputImpl, Text, } from '@react-three/uikit';
import React, { forwardRef, useMemo, useState } from 'react';
import { borderRadius, colors } from './theme.js';
import { computed } from '@preact/signals-core';
export const Textarea = forwardRef(({ panelMaterialClass, value, defaultValue, onValueChange, tabIndex, disabled, placeholder, type, ...props }, ref) => {
    const [internal, setInternal] = useState(null);
    const placeholderOpacity = useMemo(() => {
        if (internal == null) {
            return undefined;
        }
        return computed(() => (internal.current.value.length > 0 ? 0 : undefined));
    }, [internal]);
    return (React.createElement(Container, { minHeight: 80, positionType: "relative", overflow: "hidden", ref: ref, ...props },
        React.createElement(DefaultProperties, { fontSize: 14, height: "100%", width: "100%", borderWidth: 1, paddingX: 12, paddingY: 8, lineHeight: 20, opacity: disabled ? 0.5 : undefined, backgroundOpacity: disabled ? 0.5 : undefined },
            React.createElement(InputImpl, { ref: setInternal, borderRadius: borderRadius.md, backgroundColor: colors.background, borderColor: colors.input, focus: {
                    borderColor: colors.ring,
                }, panelMaterialClass: panelMaterialClass, multiline: true, value: value, defaultValue: defaultValue, onValueChange: onValueChange, tabIndex: tabIndex, disabled: disabled, type: type }),
            placeholder != null && (React.createElement(Text, { color: colors.mutedForeground, opacity: placeholderOpacity, borderOpacity: 0, inset: 0, positionType: "absolute" }, placeholder)))));
});