mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-26 06:44:58 +00:00
johndoe6345789
54a819ed71
ORGANIZED INTO 4 MAIN CATEGORIES: - react/ React TypeScript components (145 components + Python bindings) - qml/ QML desktop components (104+ QML components) - python/ Python package implementations - legacy/ Utilities, contexts, and migration-in-progress code SUPPORTING FOLDERS (kept as-is): - icons/ 421 SVG icons - theming/ Material Design 3 theme system - styles/ SCSS modules and utilities - scss/ SCSS preprocessor files - docs/ Documentation files STRUCTURE IMPROVEMENTS: ✅ All code preserved (nothing deleted) ✅ Clear separation by implementation type ✅ Better navigation and discoverability ✅ Easy to find what you need ✅ Professional organization DOCUMENTATION: - Added STRUCTURE.md explaining the new layout - Updated folder organization with clear purpose - Maintained all original functionality All files reorganized while keeping full functionality intact. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import React, { forwardRef } from 'react'
|
|
import { useFormControl } from './FormControl'
|
|
|
|
/**
|
|
* Props for NativeSelect component
|
|
*/
|
|
export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
children?: React.ReactNode
|
|
/** Visual variant */
|
|
variant?: 'standard' | 'outlined' | 'filled'
|
|
/** Icon component to use for dropdown indicator */
|
|
IconComponent?: React.ComponentType<{ className?: string }>
|
|
/** Input element props */
|
|
inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>
|
|
/** Full width select */
|
|
fullWidth?: boolean
|
|
/** Error state */
|
|
error?: boolean
|
|
}
|
|
|
|
/**
|
|
* NativeSelect - Native browser select element with MUI-like styling
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <NativeSelect value={value} onChange={handleChange}>
|
|
* <option value="">Select an option</option>
|
|
* <option value="one">One</option>
|
|
* <option value="two">Two</option>
|
|
* </NativeSelect>
|
|
* ```
|
|
*/
|
|
export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
|
|
(
|
|
{
|
|
children,
|
|
variant = 'outlined',
|
|
IconComponent,
|
|
inputProps,
|
|
fullWidth = false,
|
|
error: errorProp,
|
|
disabled: disabledProp,
|
|
className = '',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const formControl = useFormControl()
|
|
const error = errorProp ?? formControl.error
|
|
const disabled = disabledProp ?? formControl.disabled
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
native-select
|
|
native-select--${variant}
|
|
${fullWidth ? 'native-select--full-width' : ''}
|
|
${error ? 'native-select--error' : ''}
|
|
${disabled ? 'native-select--disabled' : ''}
|
|
${className}
|
|
`.trim().replace(/\s+/g, ' ')}
|
|
>
|
|
<select
|
|
ref={ref}
|
|
className="native-select__input"
|
|
disabled={disabled}
|
|
aria-invalid={error}
|
|
{...inputProps}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</select>
|
|
{IconComponent && (
|
|
<IconComponent className="native-select__icon" />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
NativeSelect.displayName = 'NativeSelect'
|