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>
45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
'use client'
|
|
|
|
/**
|
|
* useMediaQuery - Re-exported from @metabuilder/hooks
|
|
*
|
|
* BACKWARD COMPATIBILITY: This file re-exports from @metabuilder/hooks
|
|
* for consumers still importing from @metabuilder/fakemui.
|
|
*
|
|
* Prefer importing directly from @metabuilder/hooks:
|
|
* import { useMediaQuery } from '@metabuilder/hooks'
|
|
*/
|
|
|
|
// Re-export from hooks package (which has a more comprehensive TypeScript implementation)
|
|
export { useMediaQuery } from '@metabuilder/hooks'
|
|
|
|
// Convenience hooks for common breakpoints (matching MUI defaults)
|
|
// These are kept here for backward compatibility - they use the hooks version internally
|
|
import { useMediaQuery } from '@metabuilder/hooks'
|
|
|
|
const breakpoints = {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 900,
|
|
lg: 1200,
|
|
xl: 1536,
|
|
}
|
|
|
|
export function useMediaQueryUp(breakpoint) {
|
|
const width = breakpoints[breakpoint] || breakpoint
|
|
return useMediaQuery(`(min-width: ${width}px)`)
|
|
}
|
|
|
|
export function useMediaQueryDown(breakpoint) {
|
|
const width = breakpoints[breakpoint] || breakpoint
|
|
return useMediaQuery(`(max-width: ${width - 0.05}px)`)
|
|
}
|
|
|
|
export function useMediaQueryBetween(start, end) {
|
|
const startWidth = breakpoints[start] || start
|
|
const endWidth = breakpoints[end] || end
|
|
return useMediaQuery(`(min-width: ${startWidth}px) and (max-width: ${endWidth - 0.05}px)`)
|
|
}
|
|
|
|
export default useMediaQuery
|