@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
67 lines (64 loc) • 1.87 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { useNexUI } from '../provider/Context.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { flexRecipe } from '../../theme/recipes/flex.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';
const useSlotClasses = ()=>{
const { prefix } = useNexUI();
return useMemo(()=>{
const flexRoot = `${prefix}-flex`;
const slots = {
root: [
'root'
]
};
return composeClasses(slots, getUtilityClass(flexRoot));
}, [
prefix
]);
};
const Flex = (inProps)=>{
const props = useDefaultProps({
name: 'Flex',
props: inProps
});
const { gap, children, justify, align, wrap, direction = 'row', inline = false, ...remainingProps } = props;
const ownerState = {
...props,
direction,
inline
};
const classes = useSlotClasses();
const style = useStyles({
ownerState,
name: 'Flex',
recipe: flexRecipe
});
const [FlexRoot, getFlexRootProps] = useSlot({
style,
ownerState,
elementType: 'div',
externalForwardedProps: remainingProps,
classNames: classes.root,
additionalProps: {
sx: {
gap,
flexDirection: direction,
alignItems: align,
justifyContent: justify,
flexWrap: wrap
}
}
});
return /*#__PURE__*/ jsx(FlexRoot, {
...getFlexRootProps(),
children: children
});
};
Flex.displayName = 'Flex';
export { Flex };