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.
34 lines (33 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import { Icon } from '../Icon';
export const Select = forwardRef(({ options, value, onChange, placeholder = 'Select an option...', size = 'md', variant = 'primary', disabled = false, leftIcon, rightIcon, className = '', id, name, required = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, ...props }, ref) => {
const sizeClasses = {
sm: 'select-sm',
md: 'select-md',
lg: 'select-lg'
};
const variantClasses = {
primary: 'select-primary',
secondary: 'select-secondary',
success: 'select-success',
warning: 'select-warning',
error: 'select-error'
};
const selectClasses = [
'select',
sizeClasses[size],
variantClasses[variant],
leftIcon ? 'select-with-left-icon' : '',
rightIcon ? 'select-with-right-icon' : '',
disabled ? 'select-disabled' : '',
className
].filter(Boolean).join(' ');
const handleChange = (event) => {
if (onChange) {
onChange(event.target.value);
}
};
return (_jsxs("div", { className: "select-wrapper", children: [leftIcon && (_jsx("div", { className: "select-left-icon", children: leftIcon })), _jsxs("select", { ref: ref, id: id, name: name, value: value, onChange: handleChange, disabled: disabled, required: required, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, className: selectClasses, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), rightIcon ? (_jsx("div", { className: "select-right-icon", children: rightIcon })) : (_jsx("div", { className: "select-arrow", children: _jsx(Icon, { name: "chevron-down", size: "sm" }) }))] }));
});
Select.displayName = 'Select';