react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
22 lines (21 loc) • 1.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import { Button } from '../../atoms/Button';
export const GroupedInput = forwardRef(({ inputClassName = '', wrapperClassName = '', size = 'md', isRounded = false, leftButton = false, leftButtonContent, leftButtonVariant = 'primary', leftButtonSize = 'sm', leftButtonColorScheme = 'solid', rightButton = false, rightButtonContent, rightButtonVariant = 'primary', rightButtonSize = 'sm', rightButtonColorScheme = 'solid', ...props }, ref) => {
const sizeClasses = {
sm: 'grouped-input-sm',
md: 'grouped-input-md',
lg: 'grouped-input-lg'
};
const inputClasses = [
'grouped-input',
sizeClasses[size || 'md'],
inputClassName
].filter(Boolean).join(' ');
const wrapperClasses = [
'grouped-input-wrapper',
isRounded ? 'grouped-input-rounded' : ''
].filter(Boolean).join(' ');
return (_jsxs("div", { className: `${wrapperClasses} ${wrapperClassName}`, children: [leftButton && leftButtonContent && (_jsx("div", { className: "grouped-input-left-button", children: _jsx(Button, { variant: leftButtonVariant, size: leftButtonSize, colorScheme: leftButtonColorScheme, children: leftButtonContent }) })), _jsx("input", { ref: ref, className: inputClasses, ...props }), rightButton && rightButtonContent && (_jsx("div", { className: "grouped-input-right-button", children: _jsx(Button, { variant: rightButtonVariant, size: rightButtonSize, colorScheme: rightButtonColorScheme, children: rightButtonContent }) }))] }));
});
GroupedInput.displayName = 'GroupedInput';