mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-26 14:54:55 +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>
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import React, { forwardRef, Children, cloneElement, isValidElement } from 'react'
|
|
|
|
/**
|
|
* Props for ButtonGroup component
|
|
*/
|
|
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode
|
|
/** Button size to apply to all children */
|
|
size?: 'sm' | 'md' | 'lg'
|
|
/** Button variant to apply to all children */
|
|
variant?: 'contained' | 'outlined' | 'text'
|
|
/** Color theme for buttons */
|
|
color?: 'primary' | 'secondary' | 'error' | 'success' | 'warning'
|
|
/** Stack buttons vertically */
|
|
vertical?: boolean
|
|
/** Disable all buttons */
|
|
disabled?: boolean
|
|
/** Full width button group */
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
/**
|
|
* ButtonGroup - Groups related buttons together with consistent styling
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <ButtonGroup variant="contained" color="primary">
|
|
* <Button>One</Button>
|
|
* <Button>Two</Button>
|
|
* <Button>Three</Button>
|
|
* </ButtonGroup>
|
|
* ```
|
|
*/
|
|
export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
|
|
(
|
|
{
|
|
children,
|
|
size = 'md',
|
|
variant = 'outlined',
|
|
color = 'primary',
|
|
vertical = false,
|
|
disabled = false,
|
|
fullWidth = false,
|
|
className = '',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const childArray = Children.toArray(children)
|
|
|
|
const enhancedChildren = childArray.map((child, index) => {
|
|
if (isValidElement(child)) {
|
|
const isFirst = index === 0
|
|
const isLast = index === childArray.length - 1
|
|
|
|
return cloneElement(child as React.ReactElement<Record<string, unknown>>, {
|
|
size,
|
|
variant,
|
|
color,
|
|
disabled: disabled || (child.props as Record<string, unknown>).disabled,
|
|
className: `btn-group__btn ${isFirst ? 'btn-group__btn--first' : ''} ${isLast ? 'btn-group__btn--last' : ''} ${!isFirst && !isLast ? 'btn-group__btn--middle' : ''}`,
|
|
})
|
|
}
|
|
return child
|
|
})
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`btn-group ${vertical ? 'btn-group--vertical' : ''} ${fullWidth ? 'btn-group--full-width' : ''} ${className}`}
|
|
role="group"
|
|
{...props}
|
|
>
|
|
{enhancedChildren}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
ButtonGroup.displayName = 'ButtonGroup'
|