mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-29 08:14:57 +00:00
johndoe6345789
d23f4a8be4
FakeMUI Components (MUI API compatibility): - Add sx prop support to all components via sxToStyle utility - Add MUI-style variants to Button (contained, outlined) - Add component prop to Typography for polymorphic rendering - Add label prop to Chip (MUI uses label vs children) - Add edge/color/size props to IconButton - Add component prop to List for nav rendering - Add href support to ListItemButton - Add variant prop to Avatar - Add PaperProps to Drawer New @metabuilder/components package: - vanilla/loading - LoadingIndicator, InlineLoader, AsyncLoading - vanilla/error - ErrorBoundary, ErrorDisplay, withErrorBoundary - vanilla/empty-state - EmptyState + 7 specialized variants - vanilla/skeleton - Skeleton + 6 specialized variants - Organized by framework: vanilla/, radix/, fakemui/ Hooks consolidation (FakeMUI → root hooks/): - useAccessible (5 accessibility hooks) - useToast with ToastProvider - FakeMUI re-exports from hooks for backward compatibility WorkflowUI fixes: - Fix showNotification → useUI error/success methods - Fix Redux reducer setTimeout (Immer proxy issue) - Fix useRef type error - Update to Next.js 16.1.6 with webpack mode - Add @metabuilder/fakemui dependency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React, { forwardRef } from 'react'
|
|
import { sxToStyle } from '../utils/sx'
|
|
|
|
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children?: React.ReactNode
|
|
/** Size variant (FakeMUI native) */
|
|
sm?: boolean
|
|
lg?: boolean
|
|
/** Size variant (MUI-style) */
|
|
size?: 'small' | 'medium' | 'large'
|
|
/** Color variant */
|
|
color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
|
|
/** Edge alignment for toolbar positioning */
|
|
edge?: 'start' | 'end' | false
|
|
/** MUI sx prop */
|
|
sx?: Record<string, unknown>
|
|
}
|
|
|
|
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
|
({ children, sm, lg, size, color, edge, className = '', sx, style, ...props }, ref) => {
|
|
// Determine size class
|
|
const sizeClass = size === 'small' || sm
|
|
? 'icon-btn--sm'
|
|
: size === 'large' || lg
|
|
? 'icon-btn--lg'
|
|
: ''
|
|
|
|
// Determine color class
|
|
const colorClass = color && color !== 'default' ? `icon-btn--${color}` : ''
|
|
|
|
// Determine edge class
|
|
const edgeClass = edge === 'start' ? 'icon-btn--edge-start' : edge === 'end' ? 'icon-btn--edge-end' : ''
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={`icon-btn ${sizeClass} ${colorClass} ${edgeClass} ${className}`}
|
|
style={{ ...sxToStyle(sx), ...style }}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
)
|
|
|
|
IconButton.displayName = 'IconButton'
|